Помогите с испытанием. Строим сетку 27/32

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

Застрял на том что не получается растянуть menu и сделать белый фон. Помогите пожалуйста.

   <!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
        <div class="layout-column">
        <div class="header-top">Header</div>
        </div>
        <div class="layout-column">
        <div class="menubox menu">Menu</div>
        </div>
        <div class="layout-column">
        <div class="promobox promo-columns">Promo 1</div>
        </div>
        <div class="layout-column">
        <div class="promobox promo-columns">Promo 2</div>
        </div>
        <div class="layout-column">
        <div class="leftbox left ">Left</div>
        </div>
        <div class="layout-column">
        <div class="mainbox main">Main</div>
        </div>
        <div class="layout-column">
        <div class="rightbox right">Right</div>
        </div>
        <div class="layout-column">
        <div class="footerbox footer">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;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
.layout-column {
margin: 0 auto;
width: 350px;
}
.header {
background-color: #34495e;
padding: 10px 0;
}
.header-top {
margin-top: 10px;
margin-left: 10px;
width: 320px;
min-height: 20px;
background: #c0392b; 
padding: 10px;
}
.promobox {
width: 145px;
min-height: 40px;
background: #c0392b;
margin-top: -4px;
margin-right: 0px;
margin-left: 10px;
padding: 10px;
float: left;
}
.promo-columns {
padding: 10px;   
}
.menubox {
width: 430px;
min-height: 20px;
background: #3498DB;
margin: 10px 0;
}
.menu {
padding: 10px;   
}
.leftbox {
min-height: 100px;
background: #3498DB;
width: 60px;
margin-top: 15px;
margin-left: 10px;
float: left;
}
.left {
padding: 10px;   
}
.mainbox {
width: 140px;
min-height: 100px;
background: #3498DB;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;

float: left;
}
.main {
padding: 10px;   
}
.rightbox {
width: 60px;
min-height: 100px;
background: #3498DB;
margin-left: -10px;
margin-top: 15px;
float: right;
}
.right {
padding: 10px;   
}
.footerbox {
background-color: #34495e;
min-height: 50px;
}
.footer {
padding:  10px;
2

У вас должен быть общий родитель для трех колонок, которому вы пропишете белый фон.
Вы оборачиваете каждый блок в центровщик .layout-column, что неверно для участка, где блоки расположены в одну строку (блоки promo и left, main, right).
Оборачивая меню в центровщик, вы не даете ему растянуться на всю ширину.
Здесь должно быть наоборот:

<div class="menubox menu">
        <div class=" layout-column">Menu</div>
 </div>

Посмотрите, как должно быть: [27/32] 100%. Прошу посмотреть код и указать на минусы и их последствия при верстке.

3

Спасибо теперь получилось!