/*
Properly calculates the height of the containing element with elements floated inside.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*
Remove default margin on Body
*/
body{
  margin: 0;
}

/*
Assign a background color to
.header
.main-content
.sidebar
.footer
*/
.header,
.main-content,
.sidebar,
.footer{
  background: #72C2FF;
  margin: 2px 0;
}

/*
Center Components inside
At a max width of
*/
.container{
  max-width: 400px;
  margin: 0 auto;
}


/*
Set visual heights to visualize
*/
.header{
  height: 60px;
}

.main-content{
  height: 160px;
}

.sidebar{
  height: 100px;
}

.footer{
  height: 40px;
}


/*
At 400px wide float the main content and sidebar beside eachother
*/
@media screen and (min-width: 400px){
  .main-content{
    width: 70%;
    float: left;
  }
  .sidebar{
    width: 29%;
    float: right;
  }
}