Сетки / Испытание: строим сетку [27/32] Завершено на 100%

Добрый день.
Предлагаю свой 100% вариант с претензией на логику. Старался делать грамотно.
Все двигается, нигде ничего не выползает.

Если подскажете что-то по оптимизации кода, буду рад услышать и применить это.

Песочница: http://jsbin.com/wepepavuvi/edit?html,css,output


UPD

Прикрепил активное меню из задания “Мастерская: создаём меню / Испытание: вертикальное меню [9/28]”

Песочница: http://jsbin.com/sitikiwedi/edit?html,css,output
Страница HTML для браузера: https://ru.files.fm/u/pxytejy#
Страница отличается от той, что в песочнице. Подобраны размеры для просмотра в браузере и они стали динамичными.
Скрин с браузера:

4 Симпатий

100% прохождение на float’ах.

HTML:

<html lang="ru">

<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>

<header>
	<div class="container">
		<div class="head">Header</div>
	</div>
	<div class="container-full">
		<div class="menu">Menu</div>
	</div>
	<div class="container">
		<div class="promo1">Promo 1</div>
		<div class="promo2">Promo 2</div>
		<div class="clear"></div>
	</div>
</header>

<div class="container">
	<div class="content">
		<aside class="left">Left</aside>
		<section class="main">Main</section>
		<aside class="right">Right</aside>
		<div class="clear"></div>
	</div>
</div>

<footer>
  <div class="container-full">
    <div class="footer">Footer</div>
   </div>
</footer>

CSS:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

.container {
  width: 350px;
  margin: 0 auto;
  box-sizing: border-box;
}

.container-full {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

header {
  background-color: #34495e;
  padding: 10px 0 10px 0;
}

.head {
  padding: 5px;
  box-sizing: border-box;
  background-color: #c0392b;
  height: 35px;
  margin-bottom: 10px;
}

.menu {
  height: 35px;
  box-sizing: border-box;
  padding: 5px 0 0 55px;
  margin-bottom: 10px;
  background-color: #3498db;
}

.promo1, .promo2 {
  box-sizing: border-box;
  padding: 5px;
  height: 60px;
  width: 170px;
  background-color: #c0392b;
}

.promo1 {
  float: left;
}

.promo2 {
  float: right;
}

.clear {
    clear: both;
}

.content {
  margin: 10px 0 10px 0;
}

.left {
  box-sizing: border-box;
  padding: 5px;
  height: 110px;
  width: 70px;
  float: left;
  background-color: #3498db;
}

.main {
  box-sizing: border-box;
  padding: 5px;
  height: 110px;
  float: left;
  margin-left: 10px;
  width: 190px;
  background-color: #3498db;
}

.right {
  box-sizing: border-box;
  padding: 5px;
  height: 110px;
  width: 70px;
  float: right;
  background-color: #3498db;
}

.footer {
  background-color: #34495e;
  height: 35px;
  box-sizing: border-box;
  padding: 5px 0 0 55px;
}

ПРошла на 100%. Но при загрузке в браузер, естественно, удалив размер боди, чтобы все тянулось по ширине браузера, вылезла светло-голубая полоска. Почему?

html,
body {
margin: 0;
padding: 0;
}

body {

height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
/* хедер*/
.heder-background{
width: 100%;
background-color: #34495e;
padding-top: 10px;
padding-bottom: 5px;
min-height:35px
}

.heder{
background-color: #c0392b;
margin:auto;
width: 340px;
padding: 5px;
min-height:25px;

}

.menu{
background-color: #3498db;
padding: 5px;
min-height: 25px;
margin-bottom:5px;
margin-top:10px
}

.menu-flex{
margin:auto;
width: 340px;
padding: 5px;
padding-top: 0px;

}

.promo-flex{
margin:auto;
width: 350px;
margin-top:10px;
margin-bottom:5px;

}

.promo{
background-color: #c0392b;
padding: 5px;
width: 160px;
min-height:50px
}

.float-right{
float: right;
}
.float-left{
float: left;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

/главное/
.main, .left, .right{
background-color: #3498db;
min-height: 100px;
padding: 5px
}
.left {
width: 60px;
margin-right: 10px}

.right{
width: 60px}

.main {
width: 180px;
float: left}

.footer{
padding-top:5px}


а потом ушло, когда поменяла контент. При этом вставляла разный, и больше эта полоска не появлялась.
ПРошу критики. Не сильно ли намудрила в коде?