оцените код


#1

Почему испытание не проходится если при наложении все сходится

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="wrapper">
            <div class="container">
                <div class="layout-positioner"><div class="header">Header</div></div>
                <div class="menu"><div class="layout-positioner">Menu</div></div>
                <div class="layout-positioner"><div class="promo1">Promo 1</div>
                <div class="promo2">Promo 2</div></div>
            </div>
                 <div class="layout-positioner">
                     <div class="left">Left</div>
                     <div class="main">Main</div>
                     <div class="right">Right</div>
                 </div>
            <div class="footer"><div class="layout-positioner">Footer</div></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 {
    padding-top:5px;
    width: 450px;
    margin-left:50px;
    order: 2px dashed #3498db;
}

.layout-positioner::after {
    display: table;
    content: "";
    clear: both;}
.header {
    margin-top:5px;
    padding:5px;
    width:340px;
    height:25px;
    order:1px solid;
    color:white;
    background:#c0392b;
 
    }
    .menu {
        padding-left:5px;
        margin-top:10px;
        height:35px;
    background:#3498DB;
        }
        .promo1 , .promo2{
            
            padding:5px;
            margin-top:5px;
            margin-right:10px;
            float:left;
            width:160px;
            height:50px;
            background:#c0392b;
            }
    .container {
        width:450px;
        height:170px;
        background:#34495e;
        }
        .left {margin-top:5px;
        float:left;
        width:60px;
        height:100px;
        padding:5px;
        background:#3498DB;
        }
        .main {margin-top:5px;margin-left:10px;
        float:left;
        width:180px;
        height:100px;
        padding:5px;
        background:#3498DB;
        }
        .right {margin-top:5px;margin-left:10px;
        float:left;
        width:60px;
        height:100px;
        padding:5px;
        background:#3498DB;
        }
        .footer {clear:both;
        padding-left:5px;
        margin-top:10px;
        height:25px;
    background:#34495e;
        }
        .wrapper {
            margin:0 auto;
            order:2px solid red ;
            }
/*
    Используемые цвета:
    #34495e – мокрый асфальт
    #c0392b – красный
    #3498DB – синий
*/

#2

Чтобы “пройти” испытание и получить “100%” – достаточно исправить размер footer.

Чтобы действительно сделать правильную сетку – ознакомьтесь с этим:
Помогите разобраться. Испытание: строим сетку [27/32]