Сетки / Испытание: строим сетку [27/32] Оцените, пожалуйста!)

`
Испытание: строим сетку

Header

Menu

Promo 1

Promo 2

Left

Main

Right

Footer

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


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

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

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

.layout-positioner {
    width: 350px;
    margin: 0 auto;
}
.head {
    width: 450px;
    background: #34495e;
    clear: both;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header {
    min-height: 35px;
    background: #c0392b;
    width: 350px;   
}

.menu {  
    background: #3498DB;
    margin-top:10px;
    margin-bottom:10px;
    min-height: 35px;
}

.column1 {
    width: 170px;
    height: 60px;
    float: left;
    background:  #c0392b;  
}

.column2 {
    width: 170px;
    height: 60px;
    float: right;
    background:  #c0392b;
}

.content {
    margin-bottom:10px;
    margin-top:10px;
}

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

.left {
    width: 70px;
}

.main {
    width: 190px;
}

.right {
    width: 70px;
}

.right {
     margin-right:0px;
}

.footer {
    background: #34495e;
    height: 35px;
}

p {
padding: 5px;
margin: 0;
}
    
/*
    Используемые цвета:
    #34495e – мокрый асфальт
    #c0392b – красный
    #3498DB – синий
*/

image

Использую эту функцию, но почему-то не вставляет код нормально.

`

Перед кодом должна быть пустая строка.
Между левым краем и кодом должно быть не менее 4 пробелов.

.content {
    margin-bottom:10px;
    margin-top:10px;
}
1 лайк

уже как мог пробовал, не хочет, читал на форуме, что такое может быть.
В итоге вставил скрин

В меню параграф не закрыли. Это может влиять.

@Nerovipys для начала Вам сюда:
Помогите разобраться. Испытание: строим сетку [27/32]

Оцените пожалуйста)))тяжело далось мне это задание((

CSS

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.header {
width: 450px;
height: 150px;
background-color: #34495e;
padding-top:10px;
padding-bottom:10px;
}

.container {
width: 350px;
margin-left: auto;
margin-right: auto;
}
.container::after {
display: table;
content: “”;
clear: both;
}
.header-1 {
width: 345px;
background-color: #c0392b;
margin-left: auto;
margin-right: auto;
min-height: 30px;
padding-left: 5px;
padding-top: 5px;
}
.menu {
min-height: 30px;
padding-left: 55px;
padding-top: 5px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #3498db;
}
.promo-1 {
width: 165px;
min-height: 55px;
padding-left: 5px;
padding-top: 5px;
float: left;
background-color: #c0392b;

}
.promo-2 {
width: 165px;
min-height: 55px;
padding-left: 5px;
padding-top: 5px;
float: right;
background-color: #c0392b;
}
.container-2 {
width: 450px;
height: 130px;
}
.left {
width: 65px;
min-height: 105px;
padding-left: 5px;
padding-top: 5px;
margin-top: 10px;
margin-left: 50px;
float: left;
background-color: #3498db;
}
.main {
width: 185px;
min-height: 105px;
padding-left: 5px;
padding-top: 5px;
margin-top: 10px;
margin-left: 10px;
float: left;
background-color: #3498db;
}
.right {
width: 65px;
min-height: 105px;
padding-left: 5px;
padding-top: 5px;
margin-top: 10px;
margin-left: 10px;
float: left;
background-color: #3498db;
}
.footer {
min-height: 30px;
padding-left: 55px;
padding-top: 5px;
background-color: #34495e;
}

Без HTML понятно – Вам нужно разобраться как работает центровщик и переделать.

<!DOCTYPE html>
 <html lang="ru">
 <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="section-main">
      <div class="header layout-positioner"><span>Header</span></div>
        <div class="menu"><span>Menu</span></div>
      <div class="layout-positioner">  
        <div class="promo promo1"><span>Promo 1</span></div>
        <div class="promo promo2"><span>Promo 2</span></div>
      </div>
    </div>
    <div class="section-content">
      <div  class="content layout-positioner">
        <div class="left"><span>Left</span></div>
        <div class="main"><span>Main</span></div>
        <div class="right"><span>Right</span></div>
      </div>
    </div>
       <div class="footer"> 
       <div><span>Footer</span></div>
       </div> 
  </body>
</html>

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

.section-main {
width: 100%;
background-color: #34495e;
padding: 10px 0;
}

.header {
background-color: #c0392b;
height: 35px;
}
.content {
padding-top: 10px;
}

.promo {
background-color: #c0392b;
width: 170px;
height: 60px;
float: left;
margin-right: 10px;
}
.promo2 {
margin-right: 0;
}

.footer {
height: 35px;
background-color: #34495e;
margin-bottom: 10px;
margin-top: 10px;
}
.menu {
height: 35px;
background-color: #3498db;
margin-bottom: 10px;
margin-top: 10px;
}
.left,
.right,
.main {
background-color: #3498db;
width: 70px;
height: 110px;
margin-right: 10px;
float: left;
}
.main {
width: 190px;
}
.right {
margin-right: 0;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
border: 0px;
}

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

.menu ,
.footer {
padding-left: 50px;
}

span {
display: block;
padding: 5px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/
Оцените пожалуйста, уверен можно было сделать лучше!! Долго не мог придумать как задать внутренний паддинг тексту одновременно во всех блоках, паддинг по спанам не хотел отрисовывать верхний отступ(только левый), пришлось задать контейнерам текста блочную структуру. Можно ли так поступать и как нужно делать это правильно?!