/*

I learned a few new things by creating this page. I made use of: 
- height in the parent HTML and BODY elements
- box-sizing

I would like to learn a little more and come back to refactor and improve this page.

*/

html, body {
  background-color: #85855C;
  height: 100%;
}

.container {
  margin: 10px;
  box-sizing: border-box;
  height: 100%;
}

.main_header {
  background-color: #C2E0FF;
  box-sizing: inherit;
  display: inline-block;
  width: 100%;
  padding: 5px 20px;
}

.sub_header {
  background-color: #FF9999;
  box-sizing: inherit;
  padding: 5px 20px;
}

.left {
  background-color: #66C285;
  float: left;
  width: 66%;
  padding: 20px;
  box-sizing: inherit;
  height: 100%;
}

.right {
  background-color: #66A3FF;
  margin-left: 66%;
  padding: 20px;
  box-sizing: inherit;
  height: 100%;
}