27/32, 93%. прошу совета

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class="header"><div class="layout-positioner">Header</div></div>
        <div class="menu"><div class="layout-positioner">Menu</div></div>
        <div class="promo"><div class="layout-positioner">
            <div class="promo1">Promo 1</div>
            <div class="promo2">Promo 2</div></div>
        </div>
        <div class="content"><div class="layout-positioner">
            <div class="content-left">Left</div>
            <div class="content-main">Main</div>
            <div class="content-right">Right</div></div>
        </div>
        <div class="footer"><div class="layout-positioner">Footer</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{
    content:'';
    clear:both;
    display:table;
}

.header, .promo, .content {
    width: 450px;
    height: 45px;
    padding-top: 10px;
}
.layout-positioner {
    width: 345px;
    margin: 0 auto;
    height: 30px;
}

.header .layout-positioner, .menu .layout-positioner, .footer .layout-positioner {
    padding-left: 5px;
    padding-top: 5px
}

.menu {
    height: 35px;
}

.footer {
    height: 40px;
}

.promo {
    height: 70px;
}

.promo1, .promo2 {
    width: 163px;
    float: left;
    height: 55px;
    padding-left: 5px;
    padding-top: 5px;
}

.promo2 {
    float: right;
}

.content { 
    height: 120px;
}

.content-left, .content-main, .content-right {
    float: left;
    height: 105px;
    width: 57px;
    margin-right: 10px;
    padding-left: 5px;
    padding-top: 5px;
}

.content-right {
    margin-right: 0px;
    float: right;
}

.content-main {
    width: 196px;
}

.header, .promo, .footer, .promo {
    background-color: #34495e;
}

.header .layout-positioner, .promo1, .promo2 {
    background-color: #c0392b;
}

.menu, .content-left, .content-main, .content-right {
    background-color: #3498DB;
}

Всем доброго времени суток, прошу кто может оценить код, не могу понять почему у меня блоки Promo и Left не держат одну линию со всеми остальными, а съезжают чуть вправо. Та же ситуация и с другой стороны. Явно очень простое решение, но я его не вижу ) подскажите пожалуйста)

2

Посмотрите, пожалуйста, этот очень похожий на ваш вариант кода. Обратите внимание на то, к какому блоку добавляется распорка.
27/32 наиболее оптимальный вариант

1 лайк