Испытание: Сетки [27/32]

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

Я понимаю что похеже у меня руки не из того места растут, но подскажите что не так?)))

  <!DOCTYPE html>
    <html lang="ru">
        <head>
            <title>Испытание: строим сетку</title>
            <meta charset="utf-8">
        </head>
        <body>
            <div class="header-container">
            <div class="layout-position">
            <div class="header">Header</div>
            </div>
            <div class="menu">Menu</div>
            <div class="layout-position">
            <div class="Promo1">Promo 1</div>
            <div class="Promo1">Promo 2</div>
            </div>
            </div>
           <div class="content"> 
           <div class="layout-position">
            <div class="column1">Left</div>
            <div class="column2">Main</div>
            <div class="column3">Right</div>
            </div>
             </div>`впишите текст сюда; также, отключить форматирование текста можно, начав строку с четырех пробелов`
             <div class="footer">
             <div class="layout-position">
            Footer
            </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;
    }

    .header-container {
     background: #34495e;
     padding: 10px 0 10px 0;
        }
        
    .header {
     background:  #c0392b;
     min-height: 30px;
     width: 335px;
     padding: 5px;
        }
        
    .menu {
        background: #3498DB;
        margin-top: 10px;
        padding: 10px 55px 15px;
        }
        
    .Promo1,
    .Promo2 {
        background: #c0392b;
        width: 155px;
        min-height: 50px;
        padding: 5px;
        float: left;
    }

    .Promo1 {
        margin-top: 10px;
        margin-right: 10px;
        }
         
    .Promo2 {
        margin-top: 10px;
        margin-left: 10px;  
        }

    .column1,
    .column2,
    .column3 {
        background: #3498DB;
        float: left;
        padding:5px;
        min-height: 100px;
        }
     
    .column2 {
        width: 170px;
        margin-top: 10px;
        }   
        
    .column1 {
        width: 60px;
        margin-top: 10px;
        margin-right: 10px;
        }
        
    .column3 {
        width: 60px;
        margin-top: 10px;
        margin-left: 10px;
        }

    .footer {
       background: #34495e;
       padding: 5px 0 20px 0;
       margin-top: 10px;
        }

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

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

Подскажем. (у кого списали, а? :wink:)

Названия классов и селекторов не совпадают. Оставшиеся расхождения в размерах элементов и отступах исправите самостоятельно.

3

Блин. Да не. Там все нормально. Все совпадает. Это я уже когда пост писал правил глупые ошибки в названиях))) В css поправил, а в html забыл. :sweat_smile: Короче не хотел совсем дураком показаться, а в итоге:laughing:

То есть ошибка только в размерах?! Спасибо за помощь.

4

В размерах и отступах. Вкладка “Различия” скажет вам больше.