{27/32} прошу проверить код и подсказать как правильнее указать классы.

Курсы §15. Сетки
1 
    <div class="header clearfix">
        <div class="layout-positioner">
            <div class="layout-column-1 layut-column">
                <p>Header</p>
            </div>
        </div>
        <div class="layout-column-2 layout-column">
            <div class="layout-positioner">
                <p>Menu</p>
            </div>
        </div>
        <div class="layout-positioner">
            <div class="layout-column-3 layout-column">
                <p>Promo 1</p>
            </div>
            <div class="layout-column-4 layout-column">
                <p>Promo 2</p>
            </div>
        </div>
    </div>
    <div class="features clearfix">
        <div class="layout-positioner">
            <div class="layout-column-1 layout-column">
                <p>Left</p>
            </div>
            <div class="layout-column-2 layout-column">
                <p>Main</p>
            </div>
            <div class="layout-column-3 layout-column">
                <p>Right</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="layout-positioner">
            <p>Footer</p>
        </div
    </div>
</body>
2

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

p {
margin: 0;
padding: 5px;
}

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

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

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

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

}

.header .layout-column {
min-height: 60px;
background: #c0392b;
margin: 10px 0;
}

.header .layout-column-1 {
min-height: 35px;
background: #c0392b;
}

.header .layout-column-2 {
min-height: 35px;
background: #3498DB;
margin-bottom: 0;
}

.header .layout-column-3 {
float: left;
width: 170px;
}

.header .layout-column-4 {
float: right;
width: 170px;
}

.features .layout-column {
min-height: 110px;
background: #3498DB;
margin: 10px 0;
}

.features .layout-column-1 {
float: left;
width: 70px;
margin-right: 10px;
}

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

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

.footer {
color: white;
background: #34495e;
min-height: 45px;
}

3

Класс clearfix лучше добавлять непосредственному родителю плавающих блоков - в данном случае это .layout-positioner.
Других замечаний нет.

2 лайка
4

Ого, точно!!! Спасибо большое !