[23/32] Помогите понять в чем недочеты, насколько адекватен код и насчет ширины вопрос.

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

Здравствуйте, большая просьба взглянуть профессиональным взглядом на мое чудо) Хочется оптимизировать, такое ощущение, что слишком много классов…=( А так же не могу понять в чем ошибка в ширине “header”. Он получается шире, чем нужно, а я туплю как исправить

    <div class="header">
        <div class=" header-title layout-position">Header</div>
        <div class="menu">Menu</div>
        <div class="layout-menu layout-position">
            <div class="layout-menu-column layout-menu-column-1">Promo 1</div>
            <div class="layout-menu-column layout-menu-column-2">Promo 2</div>
        </div>
    </div>
    <div class="layout-content layout-position">
        <div class="layout-content-column column1">Left</div>
        <div class="layout-content-column column2">Main</div>
        <div class="layout-content-column column3">Right</div>
        </div>
    <div class="footer">
        Footer
    </div>

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

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

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

.header-title{
background: #c0392b;
padding: 5px 0 0 5px;
min-height: 30px;
}

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

.layout-position{
margin: 0 50px 0 50px;
width: 350px;

}

.layout-position::after {
display: table;
content: “”;
clear: both;
}

.layout-menu-column{
background: #c0392b;
width: 160px;
min-height: 50px;
padding: 5px;
}

.layout-menu-column-1{
float: left;
margin-right: 10px;

}

.layout-menu-column-2{
float: right;
margin-right: 0;
}

.layout-content{
color: white;
background: white;
padding: 10px 0 10px 0;

}

.layout-content-column{
background: #3498DB;
float:left;
padding: 5px;
min-height: 100px;

}

.column1,
.column3{
width: 60px;
}

.column2{
width: 180px;
margin: 0 10px 0;
}

.footer{
clear:both;
background: #34495e;
padding: 5px 0 0 55px;
margin: 0 0 10px 0;
min-height: 30px;
}

2

Взглянули бы, если бы было куда смотреть…
Код ваш, пожалуйста. Вставляется правильно с помощью кнопки в редакторе сообщений </>.
Теперь вижу.

3

Извините. Я вроде вставила, но как-то не так, наверное…

4

Не могу по другому вставить, он обрезает весь head

5

Ничего, этого хватит. Подождите пару минут.

6

Вот так будет:
.header-title{
background: #c0392b;
padding: 5px 0 0 5px;
box-sizing: border-box;
min-height: 35px;
}
Внутренний отступ слева добавляет блоку лишнюю ширину.
Почитайте о свойстве box-sizing, если не изучали его.
В целом код написан хорошо.

8

спасибо огромное. забыла совсем про это свойство