Испытание: Сетки [27/32] 100%. Нужна критика

Курсы §15. Сетки
21

Спасибо большое за комментарий!

22

Доброго времени суток. Сделайте, пожалуйста, ревью на код.

Испытание: строим сетку 
    <div class="header">
        <div class="layout-positioner">
            <div class="header-content">
                Header
            </div>
            <div class="menu">
                Menu
            </div>
            <div class="layout-column-1 layout-column">
                 Promo 1
            </div>
            <div class="layout-column-2 layout-column">
                 Promo 2
            </div>
        </div>
    </div>
    
    <div class="content">
        <div class="layout-positioner">
            <div class="layout-column-1 layout-column">
                 Left
            </div>
            <div class="layout-column-2 layout-column">
                Main
            </div>
            <div class="layout-column-3 layout-column">
                Right
            </div>
        </div>
    </div>
    
   <div class="footer">
       <div class="layout-positioner">
           <div class="footer-content">
               Footer
           </div>
       </div>
   </div>
    
</body>

CSS

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

.layout-positioner{
margin:0 auto;
}

.layout-positioner::after{
clear:both;
content:"";
display:table;
}

.header{
min-height:100px;;
background:#34495e;
padding-top:10px;
}

.header .layout-column{
background:#c0392b;
min-height:60px;
margin:10px 0 10px 0;
padding:5px;
box-sizing:border-box;
width:170px;
}

.header .layout-column-1{
float:left;
margin-left:50px;
}

.header .layout-column-2{
float:right;
margin-right:50px;
}

.header-content{
margin:0px 50px;
background:#c0392b;
min-height:25px;
padding:5px 5px;
}

.menu{
background:#3498DB;
margin-top:10px;
padding:5px 55px;
min-height:25px;
}

.content .layout-column{
background:#3498DB;
min-height:110px;
width:70px;
margin-top:10px;
padding:5px;
box-sizing:border-box;
}

.content .layout-column-1{
float:left;
margin-left:50px;
}

.content .layout-column-2{
float:left;
margin-left:10px;
width:190px;
}

.content .layout-column-3{
float:left;
margin-left:10px;
}

.footer{
background:#34495e;
min-height:35px;
margin-top:10px;

}
.footer-content{
padding:5px 0px 0px 50px;
}

23

Отступ 50px слева и справа быть не может. У вас есть центровщик layout-positioner, пользуйтесь им.

24

Спасибо)

25

Здравствуйте! Прошёл на 100%. Хочу поинтересоваться, какие недочёты присутствуют в моём коде. Нужно мнение специалиста.

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="layout-positioner">
                <div class="column1">Header</div>
            </div>
            <div class="column2">Menu</div>
            <div class="layout-positioner">
                <div class="column">Promo 1</div>
                <div class="column">Promo 2</div>
            </div>
        </div>
        <div class="layout-positioner">
            <div class="h column-side">Left</div>
            <div class="h column-center">Main</div>
            <div class="h column-side">Right</div>
        </div>
        <div class="footer">Footer</div>
    </body>
</html>

CSS

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

.layout-positioner {
width:350px;
margin:auto;
}

.layout-positioner::after {
clear:both;
content:"";
display:table;
}

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

.column1 {
padding:5px;
background:#c0392b;
min-height:25px;
margin-bottom: 10px;
}

.column2 {
padding:5px 55px;
background-color:#3498DB;
min-height:25px;
}

.column {
float:left;
margin: 10px 0;
background-color:#c0392b;
padding:5px;
width:160px;
min-height:50px;
}

.column:first-child {margin-right:10px;}

.h {
float:left;
background:#3498DB;
margin:10px 10px 10px 0;
padding:5px;
min-height:100px;
}

.h:last-child {margin-right: 0;}

.column-side {
width:60px;
}

.column-center {
width:180px;
}

.footer {
background:#34495e;
padding: 5px 55px;
height:25px;
}

26

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