27 Задание на 99%, проверьте актуальность решения!

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

Друзья, собственно говоря, у меня такая же просьба относительно актуальности кода :yum:
Насколько такое решение будет удобоваримым?

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class="up clearfix">
            <div class="layout-positioner">
      <div class="header">  <span>Header</span> </div>
        <div class="menu">Menu</div>
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
        </div>
        </div>
        <div class="layout-positioner clearfix">
      <div class="left">  Left </div>
       <div class="main"> Main </div>
        <div class="right">Right</div>
        </div>
        <div class="footer">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;
}
.up {
background: #34495E;
padding: 10px 0;
}
.header {
background: #C0392B;
min-height: 30px;
padding: 5px 0 0 5px
}
.menu {
background: #3498DB;
margin: 10px -50px;
padding: 5px 0 0px 55px;
min-height: 30px;
}
.promo1 {
background: #C0392B;
float: left;
width: 165px;
padding: 5px 0 0 5px;
min-height: 55px;
}
.promo2 {
background: #C0392B;
float: right;
width:165px;
padding: 5px 0 0 5px;
min-height: 55px;
}
.clearfix:after {
content: “”;
display: block;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.left,
.main,
.right{
box-sizing: border-box;
background: #3498DB;
float:left;
min-height: 110px;
width: 70px;
padding: 5px 0 0 5px;
margin: 10px 0;
}
.main {
margin: 10px;
width: 190px;
}
.footer {
background: #34495E;
min-height: 40px;
padding: 5px 0 0 55px;
}

/*
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/

И вдогонку хотелось бы прояснить еще пару моментов:

  1. Является ли дурным тоном использование “голого” текста в коде и соответственно необходимо ли оборачивать текст в <span>?
  2. Насколько приемлемо решение растянуть блок “Menu” по горизонтали отрицательными маргинами?
  3. Почему не сработал такой способ исключить из центрирования блок “Menu”?
    .layout-positioner:not(.menu) {
    width: 350px;
    margin: 0 auto;
    }