Сетки / Испытание: строим сетку [27/32] 100% Нуждаюсь в критике

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

Здравствуйте!
Пришлось немного поломать голову, но с заданием справилась. Очень бы хотелось услышать критику по коду.
Мне кажется, что немного намудрила с классами .header и .column, но без этого “костыля” не получилось сделать нормальную шапку.

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="main-header">
            <div class="header">
                <div class="layout-positioner">
                    <div class="column">
                        Header
                    </div>
                </div>
            </div>
            <div class="menu">
                <div class="layout-positioner">
                    Menu
                </div>
            </div>
            <div class="promo">
                <div class="layout-positioner">
                    <div class="layout-column">
                        Promo 1
                    </div>
                    <div class="layout-column">
                        Promo 2
                    </div>
                </div>
            </div>
        </div>
        <div class="features">
            <div class="layout-positioner">
                <div class="layout-column-left layout-column">
                    Left
                </div>
                <div class="layout-column-main layout-column">
                    Main
                </div>
                <div class="layout-column-right layout-column">
                    Right
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="layout-positioner">
                Footer
            </div>
        </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;
}

.main-header {
    background: #34495e;  
}

.header {
    background:  #34495e;
    margin-bottom: 10px;
}

.header .column {
    padding: 5px;
    min-height: 25px;
    background: #c0392b;
}

.header .layout-positioner {
    padding-top: 10px;   
}

.menu {
    padding-left: 10px;
    padding-top: 5px;
    width: 440px;
    min-height: 15px;
    background: #3498DB;
}

.promo {
    margin-top: 10px;   
}

.promo .layout-column {
    padding: 5px;
    width: 160px;
    min-height: 50px;
    background: #c0392b;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.promo .layout-column:last-child {
    margin-right: 0;   
}

.features .layout-column {
    min-height: 100px;
    background: #3498DB;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px;
}

.features .layout-column-left {
    float: left;
    width: 60px;
}

.features .layout-column-main {
    float: left;
    width: 180px;
}

.features .layout-column-right {
    float: right;
    width: 60px;
}

.features .layout-column:last-child {
    margin-right: 0;   
}

.layout-positioner {
    min-height: 30px;
    width: 350px;
    margin: 0 auto;
    /*border: 2px dashed white;*/
}

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

.footer {
    padding-left: 10px;
    padding-top: 5px;
    min-height: 40px;
    background: #34495e;    
}
2

Хорошая работа. Можете в блоках с тремя колонками в общие свойства вынести float: left;
Не обязательно последней писать именно right.
И проверьте, а так ли необходимо писать ширину для .menu.

3

Испытание 100% оцените пожалуйста, все сама.
Ну html Простой.

    <!DOCTYPE html>
        <html lang="ru">
            <head>
                <title>Испытание: строим сетку</title>
                <meta charset="utf-8">
            </head>
            <body>
                <div class="banner">
                <div class="header">Header</div>
                <div class="menu"> Menu</div>
                <div class="ban-column1">Promo 1</div>
                <div class="ban-column2">Promo 2</div>
                </div>
                <div class="column-left">Left</div>
                <div class="column-main">Main</div>
                <div class="column-right">Right</div>
                <div class="foot">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;
    }

    /*
        Используемые цвета:
        #34495e – мокрый асфальт
        #c0392b – красный
        #3498DB – синий
    */
    .banner {
        background: #34495e; 
        padding-top: 10px;
    }
    .banner:after {
        content: "";
        display: table;
        clear: both;
    }
    .header {
        width: 340px;
        height: 25px;
        background: #c0392b;
        padding: 5px;
        margin: auto
        
    }
    .menu {
        height:30px;
        background: #3498DB;
        margin-top: 10px;
        padding-left: 55px;
        padding-top: 5px;
    }
    .ban-column1 {
        width: 160px;
        background: #c0392b;
        float: left;
        margin-left: 50px;
        margin-top: 10px;
        padding: 5px;
        height: 50px;
    }
    .ban-column2 {
        background: #c0392b;
        float: right;
         margin-right: 50px;
        margin-top: 10px;
        width: 160px;
        padding: 5px;
        height: 50px;
        margin-bottom: 10px;
    }
    .column-left {
        background: #3498DB;
        margin-top: 10px;
        float: left;
        margin-left: 50px;
        width: 60px;
        padding: 5px;
        height: 100px;
    }
    .column-main {
        background: #3498DB;
        float: left;
        margin-top: 10px;
        margin-left:10px;
        width: 180px;
        padding: 5px;
        height: 100px;
    }
    .column-right {
        background: #3498DB;
        float: right;
         margin-top: 10px;
        margin-right:50px;
        width: 60px;
        padding: 5px;
        height: 100px;
         margin-bottom: 10px;
    }
    .foot {
        background: #34495e;
        clear: both;
        height: 30px;
        padding-top: 5px;
        padding-left: 55px; 
    }
4

Для самостоятельной работы очень даже неплохо. Замените только height на min-height везде по коду.
И почитайте про центрирование блоков. Здесь не раз уже разбирали, для чего нужен layout-positioner.
Еще было бы хорошо сократить код, сгруппировав одинаковые у элементов свойства.