Насколько кривоват код?Т.е. читабелен ли он. 90%

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

Я очень старался воплотить в этом испытании все навыки, которые дали предыдущие уроки. Подскажите, что можно было бы улучшить, касаемо кода?Хочется писать максимально понятно код уже сейчас, поймите правильно:sunglasses: Получилось набрать только 90%, но я понимаю в принципе как работает такое позиционирование. Заранее спасибо!

      <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="main-header">
    <div class="mar"></div>
    <div class="header">
        <div class="layout-positioner">Header</div>
    </div>
    <div class="nav">
        <div class="layout-positioner">Menu</div>
    </div>
    <div class="promo_header">
        <div class="layout-positioner2">
    <div class="promo promo-left">Promo 1</div>
    <div class="promo promo-right">Promo 2</div>
        </div>
    </div>
    </div>
    <div class="middle">
        <div class="layout-positioner2">
    <div class="column left-side">Left</div>
    <div class="column main-cont">Main</div>
    <div class="column right-side">Right</div>
        </div>
        <div class="layout-positioner2">
    </div>
    <div class="page-footer">
        <div class="layout-positioner2">
            <div class="footer">Footer</div>
        </div>
        </div>
    </div>
</body>

CSS

    .main-header { background-color: #34495e;
border-top: 1px solid #34495e; }
.layout-positioner {
    width: 345px;
    margin: 0 auto;
    
}
.layout-positioner2 {
    width: 355px;
    margin: 0 auto;
}
.layout-positioner2:after {
    content: "";
    display: table;
    clear: both;
}

.layout-positioner:after {
    content: "";
    display: table;
    clear: both;
}
.header > .layout-positioner {
    background-color: #c0392b;
    padding: 5px;
    height: 25px;
    margin-top: 10px;
}
.nav { background-color: #3498DB;}
.nav > .layout-positioner {
    background-color: inherit;
    padding: 5px;
    height: 25px;
    margin-top: 10px;
}
.promo {
    width: 162px;
    background-color: #c0392b;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 50px;
}
.promo-left {float: left;}
.promo-right {float: right;}

.column {
    background-color: #3498DB;
    float: left;
    width: 55px;
    height: 100px;
    margin: 10px 10px 10px 0px;
    padding: 5px;
}
.right-side { margin-right: 0px; float: right;}
.main-cont {
    width: 190px;
}
.page-footer {
    background-color: #34495e;
}
.footer {
    background-color: inherit;
    padding: 5px;
    height: 25px;
}

http://joxi.ru/eAO1d1XCxDKWem

2

Это что?..
Почему две распорки?
Почитайте несколько тем с этим заданием на форуме. Каждый день разбираем. И уже с учетом того, что вы найдете и исправите сами, будем корректировать то, что останется.

3

Две распорки, потому что указывая размер в 350px, у меня блок меню и футер становились меньше по 5px с каждой стороны. Пришлось сделать вторую распорку для них с другим размером 360px.
<div class="mar"></div> - это что бы отступ у хедера был нормальный. Я пробовал добавить page-header padding в 1px, но из-за этого везде оступы были. Решил, что можно решить таким образом :neutral_face: