Задание сетки [27/32] 100%. Нужен обзор кода.

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

Всем привет, завершил задание [27/32] нужна критика. Заранее спасибо.

HTML

    <!DOCTYPE html>
     <html lang="ru">
     <head>
         <title>Испытание: строим сетку</title>
         <meta charset="utf-8">
     </head>
    <body>
     
    <!-- Header begins -->
    <div class="header">
        <div class="layout-positioner">Header</div>
    </div>
    <!-- Header ends -->
    
    <!-- Menu begins -->
    <div class="menu">
        <div class="layout-positioner">Menu</div>
    </div>
    <!-- Menu ends -->
    
    <!-- Promo begins -->
    <div class="container-promo">
        <div class="layout-positioner clearfix">
            <div class="promo1">Promo 1</div>
            <div class="promo2">Promo 2</div>
        </div>
    </div>
    <!-- Promo ends -->
    
    <!-- Content begins -->
    <div class="container-content">
        <div class="layout-positioner clearfix">
            <div class="left">Left</div>
            <div class="right">Right</div>
            <div class="main">Main</div>
        </div>
    </div>
    <!-- Content ends -->
    
     <!-- Footer begins -->
    <div class="footer">
        <div class="layout-positioner">Footer</div>
    </div>
    <!-- Footer ends -->
    
</body>
</html>

CSS

    html,
    body {
        margin: 0;
        padding: 0;
    }
    
    body {
        width: 450px;
        height: 335px;
        font-family: "Arial", sans-serif;
        font-size: 10px;
        color: white;
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    .layout-positioner {
        width: 345px;
        margin: 0 auto;
        padding-top: 5px;
        padding-left: 5px;
    }
    
    /* Header styles */
    
    .header {
         background: #34495e;
         padding: 10px 0;
    }
    .header .layout-positioner {
        background: #c0392b;
        padding-bottom: 17px;
    }
    
    /* Menu styles */
    
    .menu {
        background: #3498DB;
        padding-bottom: 17px;
    }
    
    /* Promo styles */
    
    .container-promo {
        background: #34495e;
        padding: 10px 0;
    }
    .promo1, .promo2 {
        width: 165px;
        background: #c0392b;
        float: left;
        padding: 5px 0 42px 5px;
    }
    .container-promo .promo1 { margin-right: 10px; }
    .container-promo .layout-positioner { width: 350px; padding: 0; }
    
    /* Content styles */
    
    .container-content { padding: 10px 0; }
    .container-content .left {
        float: left;
        width: 65px;
    }
    .container-content .right {
        float: right;
        width: 65px;
    }
    .container-content .main {
        margin: 0 80px;
    }
    .left, .right, .main {
        background: #3498DB;
        padding: 5px 0 92px 5px;
    }
    .container-content .layout-positioner { width: 350px; padding: 0; }
    
    /* Footer styles */
    
    .footer {
        background: #34495e;
    }
    .footer .layout-positioner {
        padding-bottom: 30px; 
    }
2

Каждый родительский блок, внутри которого есть блоки со свойством float, должен иметь класс clearfix.
У вас есть такие строчки:

У блоков должна быть высота, не надо их дотягивать до нужного размера отступом снизу.
А вот такая строка у вас есть, потому что не задан float у .main:

Почитайте другие темы на форуме. Задание “Сетки” разбирается регулярно.

3

Это есть.

С этим я нагрешил.
Спасибо за комментарий.