Испытание: строим сетку [27/32]. Можно ли вывалить див из родительского по ширине слева и справа?

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

Можно ли див меню вывалить из дива “layout-positioner” влево и вправо до body? Ну и если есть замечания и критика по коду, буду рад почитать.

HTML 
<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="red layout-column-1">Header</div>
            <div class="blue layout-column-2">Menu</div>
            <div class="red layout-column-3">Promo 1</div>
            <div class="red layout-column-4">Promo 2</div>
        </div>
    </div>
    
    <div>
        <div class="layout-positioner">
            <div class="blue layout-column">Left</div>
            <div class="blue layout-column">Main</div>
            <div class="blue layout-column">Right</div>
        </div>
    </div>
    
    <div class="footer">
        <div class="layout-positioner">
            <div>Footer</div>
        </div>
      </div>
</body>
CSS

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

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

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

.header {
padding-top: 10px;
}

.red {
background: #c0392b;
}

.blue {
background: #3498DB;
}

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

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

.layout-column-1 {
height: 25px;
margin: 0 0 10px;
padding: 5px;
}

.layout-column-2 {
height: 25px;
margin: 10px 0;
padding: 5px;
}

.layout-column-2 div {
width: 150px;
height: 25px;
clear: both;
}

.layout-column-3 {
height: 50px;
width: 160px;
margin: 0 0 10px;
float: left;
padding: 5px;
}

.layout-column-4 {
height: 50px;
width: 160px;
margin: 0 0 10px;
float: right;
padding: 5px;
}

.layout-column {
height: 100px;
float: left;
padding: 5px;
margin: 10px 0 10px 10px;
}

.layout-column:first-child {
margin-left: 0;
width: 60px;
}

.layout-column:nth-child(2) {
width: 180px;
}

.layout-column:last-child {
width: 60px;
}

.footer .layout-positioner div {
height: 40px;
padding: 5px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/