27/32 Нужна помощь

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

`

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer
`

`html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
background:#34495e;
}

.top {
padding:5px;
}

.header {
background:#c0392b;
padding:10px;
margin-left:50px;
margin-right:50px;
}

.bot {
margin:5px;
}

.menu {
background:#3498db;
padding:10px;
margin-bottom:10px;
}

.promo1 {
background:#c0392b;
width:170px;
margin-left:50px;
height:70px;
float:left;
}

.promo2 {
background:#c0392b;
width:170px;
margin-left:230px;
height:70px;
margin-bottom:10px;
}

.left {
background:#3498db;
width:70px;
height:110px;
margin-left:50px;
float:left;
}

.main {
background:#3498db;
width:190px;
height:110px;
margin-left:130px;
}

.right {
background:#3498db;
width:70px;
height:110px;
height:110px;
margin-left:330px;
float:right;
}

.clearfix{
content:’’;
display:table;
clear:both;
}`

307a8-clip-34kb.png579×797 26.1 KB

  1. Почему отступы?
    2.Почему текст не совпадает?
    3.Почему блок не хочет влезать, а выпадает?
2

Перечисленные вами вопросы - это далеко не всё, что должно вас беспокоить…
Не меняйте стили для body, если об этом не сказано в самом задании. Вы залили весь фон синим цветом, а между прочим у вас три колонки должны быть на белом.
Футер вы вообще оставили без внимания. Ни одного стиля для него не вижу.
Теперь перейдем к вашим вопросам. Отступы могут не совпадать по нескольким причинам. Вы могли неправильно измерить их величину или у вас выбрана неверная высота у элементов.
Текст не совпадает, потому что вы не задали внутренние отступы в блоках.
А блок не влезает, потому что ему не хватило места. А вы отодвинули его аж на 330px влево.
Блоку .main тоже необходимо прописать float: left;
Я думаю, что вам рано выполнять это задание. Вернитесь к курсам “Блочная модель документа”, “Позиционирование”. И “Сетки” заново пройдите.

2 лайка
3

Большое спасибо, за ваш ответ и за ваш совет.

4

Пожалуйста)

1 лайк