27/32 не получается, помогите, пожалуйста

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

первое задание с которым я никак не совладаю, помогите пожалуйста, подскажите

Имя файла изображения1561×1033 115 KB 

<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="layout-column">
                <div class="header-1 hidden">
                    <p>Header</p>
                </div>
            </div>
        </div>
    </div>
    <div class="menu">
        <div class="layout-positioner">
            <div class="menu hidden">
                <p>Menu</p>
            </div>
        </div>
    </div>
    <div class="promo">
        <div class="layout-positioner">
            <div class="layout-column">
                <div class="promo1 hidden">
                    <p>Promo 1</p>
                </div>
            </div>
            <div class="layout-column">
                <div class="promo2 hidden">
                    <p>Promo 2</p>
                </div>
            </div>
        </div>
    </div> 
    
    <div class="features">
        <div class="layout-positioner">
            <div class="layout-column">
                <div class="left hidden">
                    <p>Left</p>
                </div>
            </div>
            <div class="layout-column">
                <div class="main hidden">
                    <p>Main</p>
                </div>
            </div>
            <div class="layout-column">
                <div class="right hidden">
                    <p>Right</p>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="layout-positioner">
            <div class="footer-1 hidden">
                <p>Footer</p>
            </div>
        </div>
    </div>    
</body>

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

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

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

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

.layout-positioner::after {
display: block;
content: “”;
clear: both;
}

.hidden {
display: block;
}

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

.header .layout-column {
background: #c0392b;
}

.header-1 {
background: #c0392b;
padding: 5px;
box-sizing: border-box;
}

.menu {
background: #3498DB;
padding: 5px;
margin: 0;
min-height: 20px;
}

.promo {
min-height: 35px;
color: white;
background: #34495e;
padding: 10px 0;
}

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

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

.features {
margin: 10px 0;
}

.features .layout-column {
float: left;
margin-right: 10px;
min-width: 65px;
min-height: 110px;
background: #3498DB;
padding-left: 5px;
}

.features .main {
min-width: 180px;
}

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

.footer {
min-height: 35px;
color: white;
background: #34495e;
margin: 10px 0;
}

.footer-1 {
padding: 5px;
}

2

Зачем вы divу назначили display block, он по умолчанию является блочным элементом.

3

Могу сказать одно, разбирайтесь с отступами, и уберите свойство box sizing, тут решение без него, у вас отступы лишние наставленны, комментируйте их и проверяйте

4

По поводу .hidden {display: block;} абсолютно согласна с Алексеем.
Теперь по поводу всего остального. Ваша самая главная ошибка в том, что когда обернули текст внутри блоков в параграф, не обнулили у него отступы.
Вот что надо было сделать:
p {
margin: 0;
padding: 5px;
}
Все остальные записи padding-left: 5px; можно убирать.
Также у вас небольшие проблемы с размером блоков. Блокам .header и .menu не хватает высоты, а для .promo и блоков внутри features не хватает ширины.
Еще хотелось бы обратить ваше внимание на чрезмерную вложенность в HTML-коде.
Ваш исправленый вариант:
HTML-код

 <div class="header">
        <div class="layout-positioner">
            <div class="layout-column">
                <!--<div class="header-1">-->
                    <p>Header</p>
                <!--</div>-->
            </div>
        </div>
    </div>

    <div class="menu">
        <div class="layout-positioner">
            <!--<div class="menu">-->
                <p>Menu</p>
            <!--</div>-->
        </div>
    </div>

    <div class="promo">
        <div class="layout-positioner">
            <div class="layout-column">
                <!--<div class="promo1 hidden">-->
                    <p>Promo 1</p>
                <!--</div>-->
            </div>
            <div class="layout-column">
                <!--<div class="promo2 hidden">-->
                    <p>Promo 2</p>
                <!--</div>-->
            </div>
        </div>
    </div> 

    <div class="features">
        <div class="layout-positioner">
            <div class="layout-column">
                <!--<div class="left hidden">-->
                    <p>Left</p>
                <!--</div>-->
            </div>
            <div class="layout-column">
                <!--<div class="main hidden">-->
                    <p>Main</p>
                <!--</div>-->
            </div>
            <div class="layout-column">
                <!--<div class=" right hidden">-->
                    <p>Right</p>
                <!--</div>-->
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="layout-positioner">
            <!--<div class="footer-1 hidden">-->
                <p>Footer</p>
            <!--</div>-->
        </div>
    </div>

CSS-код

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

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

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

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

.layout-positioner::after {
display: block;
content: “”;
clear: both;
}

/.hidden {
display: block;
}/

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

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

/.header-1 {
background: #c0392b;
/padding: 5px;/
/box-sizing: border-box;/
}/

.menu {
background: #3498DB;
/padding: 5px;/
margin: 0;
min-height: 35px;
}

.promo {
/min-height: 35px;/
color: white;
background: #34495e;
padding: 10px 0;
}

.promo .layout-column {
float: left;
margin: 0;
margin-right: 10px;
width: 170px;
min-height: 60px;
background: #c0392b;
/padding-left: 5px;/
}

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

.features {
margin: 10px 0;
}

.features .layout-column {
float: left;
margin-right: 10px;
min-width: 70px;
min-height: 110px;
background: #3498DB;
/padding-left: 5px;/
}

.features .layout-column:nth-child(2) {
min-width: 190px;
}

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

.footer {
min-height: 35px;
color: white;
background: #34495e;
margin: 10px 0;
}

/.footer-1 {
padding: 5px;
}/
p {
margin: 0;
padding: 5px;
}`
Разбирайте, задавайте вопросы.

2 лайка
5

спасибо) с отступами знаю что проблема, на форум написала потому что уже всяко крутила, вертела, отступами, а ничего толкового не выходило

6

Спасибо! намудрила, значит я с div-ами, буду аккуратнее

1 лайк
7

На ошибках учаться, этот урок научил вас что не правильный отступ может порушить всю верстку