Прошу оценить код и подсказать варианты улучшения

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div>
    <div class='head'>
        <div class='header'>Header</div>
        <div class='menu'>Menu</div>
        <div class='promo'>Promo 1</div>
        <div class='promo2'>Promo 2</div>
    </div>
   <div>
        <div class='center left'> Left</div>
        <div class='center main'> Main</div>
        <div class='center right'> Right</div>
    </div>
   <div class='footer'> Footer</div>
   </div>
</body>

==========================================
CSS

 * {

box-sizing: border-box;
}

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

}

 body {
width: 450px;
height: 335px;
font-family: "Arial", sans-serif;
font-size: 10px;
color: white;
position:relative;

}

.head {
width: 450px;
/*min-height: 170px;*/
background: #34495e;

}
.head::after {
content:'.';
display: block;
clear: both;
visibility: hidden;
height:0;
}

.header {
width:350px;
height:35px;
background: #c0392b;
padding: 5px;
margin: 10px 50px;
float:left;
}

.menu {
background: #3498DB;
width:100%;
height:35px;
margin-bottom: 5px;
padding: 5px 55px;
float:left;

}

.promo, .promo2 {
background: #c0392b;
width: 170px;
height:60px;
margin: 5px;
margin-bottom:10px;
padding:5px;
float: left;

}

.promo {
margin-left: 50px;

}

.center {
background: #3498DB;
width:70px;
height:110px;
float: left;
margin: 10px 10px 10px 0;
padding:5px;

}

.left {
margin-left: 50px;

}

 .main {
width: 190px;

}

.footer {
width:100%;
height: 35px;
background: #34495e;
padding: 5px 55px;
bottom: 0;
position: absolute;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
2

Это для чего?

У вас отсутствует центровщик. Высоту блоков вы ограничили, лучше писать min-height. Для основных блоков float не надо. Только для двух и трех колонок.

3

visibility: hidden;
height:0;

это для распорки, так как контент сделан с точкой, без точки не работает.

по поводу флотов, то в меню я явно психанул ) этот блок занимает всю ширину блока. А вот хедер без него прилипал к потолку и ни как не отставал, как я сейчас понял, для этого как раз и нужен центровщик, так что надо бы еще раз пройти этот курс и почитать сторонние ресурсы.

4

В футере тоже психанули) Позиционированием занимаетесь, хотя по курсам оно еще впереди.

5

я решил его сразу вниз прилепить, что бы не зависеть от высоты содержимого, но сейчас понимаю, что собственно это же футер, он все равно внизу будет.