Испытание: строим сетку [27/32]. Целесообразность кода

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

Здравствуйте! Задание выполнил, но хотелось бы узнать, насколько оправдан такой способ его решения. При выполнении старался передать не только внешнее сходство, но и определенную структуру страницы.
Пара возникших вопросов:

  1. В задании предполагается, что блоки header, menu и promo являются частью хедера сетки? Если да, то скажите, пожалуйста, можно ли заточить эти элементы в блок с классом “layout-positioner” и выровнять их по центру с помощью margin-а для .layout-positioner, избежав при этом выравнивания блока menu?
  2. Почему рамка заданная классу “layout-positioner” не отображается вокруг элементов расположенных внутри блока с таким классом, но отображается вокруг самих блоков с таким классом?

l-c - это “layout-column”;
l-p - это “layout-positioner”.

html:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="l-c1 l-p">
                <div class="text">Header</div>
            </div>
            <div class="l-c2">
                <div class="text1">Menu</div>
            </div>
            <div class="l-p">
            <div class="l-c3">
                <div class="text">Promo 1</div>
            </div>
            <div class="l-c4">
                <div class="text">Promo 2</div>
            </div>
            </div>
        </div>
        <div class="features">
            <div class="l-p">
                <div class="l-c5">
                    <div class="text">Left</div>
                </div>
                <div class="l-c6">
                    <div class="text">Main</div>
                </div>
                <div class="l-c7">
                    <div class="text">Right</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="l-c8 text1">Footer</div>
        </div>
    </body>
</html>

CSS:

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

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

.header {
background: #34495e;
height: 170px;
}

.l-c1,
.l-c2,
.l-c3,
.l-c4 {
float: left;
margin-top: 10px;
}

.l-c1 {
background: #c0392b;
width: 350px;
height: 35px;
}

.l-c2 {
background: #3498DB;
width: 450px;
height: 35px;
}

.l-c3,
.l-c4 {
background: #c0392b;
width: 170px;
height: 60px;
}

.l-c3 {
margin-right: 10px;
}

.text {
margin: 5px;
}

.text1 {
width: 340px;
margin: 5px 55px;
}

.l-p {
width: 350px;
margin-left: 50px;
}

.features {
height: 130px;
}

.l-c5,
.l-c6,
.l-c7 {
float: left;
background: #3498db;
height: 110px;
margin-top: 10px;
margin-right: 10px;
}

.l-c5,
.l-c7 {
width: 70px;
}

.l-c6 {
width: 190px;
}

.l-c7 {
margin-right: 0px;
}

.footer {
background: #34495e;
height: 35px;
}

.l-c8 {
float: left;
}