Прочитав задание становится понятным, что весь код нам придется писать самому. Итак, с чего же начать? Конечно же с HTML-кода. Для начала стоит определится с количеством блоков которые нам нужны.
Сразу хочу сказать, что я такой же ученик, поэтому мой код, возможно будет не самым коротким или самым идеальным на Ваш взгляд, но это мой код и мой способ. Я с удовольствием выслушаю все пожелания и критику дабы стать лучше.
Приступим к решению задачи.
Во-первых я посчитал сколько всего будет контейнеров 
div. У меня вышло 8 видимых контейнеров для + 1 для бекграунда.
Изначально мой html-код выглядел просто как набор контейнеров идущих друг за другом. Так-же я решил обернуть все названия блоков в тег p, т.к. все они имеют одинаковые внутренние отступы.
<div class="header"><p>Header</p></div>
<div class="menu"><p>Menu</p></div>
<div class="promo-collum"><p>Promo 1</p></div>
<div class="promo-collum"><p>Promo 2</p></div>
<div class="row collum"><p>Left</p></div>
<div class="row collum"><p>Main</p></div>
<div class="row collum"><p>Right</p></div>
<div class="footer"><p>Footer</p></div>
После нужно было создать контейнер (центровщик) с помощью которого я смогу центрировать необходимые мне контейнеры или их содержимое.
Я создал контейнер с классом layout-positioner и добавил класс центровщика в наш хедер. Вот так:
<div class="header layout-positioner"><p>Header</p></div>
Меню у нас растянуто по всей ширине, а его содержимое центрировано. Чтобы добиться такого эффекта поместим наш центровщик внутрь блока меню, тем самым меню у нас останется растянутым на всю ширину, а его содержимое центрируется:
<div class="menu">
<div class="layout-positioner"><p>Menu</p></div>
</div>
Дальше, у нас 2 промо-колонки, неплохо было бы иметь контроль над ними сразу и конечно же центрировать, а так же для контейнера родителя в котором будут находится зафлоаченые 2 промо-колонки нам понадобится распорка, дополнительно пропишем класс clearfix. Теперь поместим контейнеры промо-колонок внутрь контейнера с классами promo layout-positioner clearfix. Вот так:
<div class="promo layout-positioner clearfix"> - для контроля, центрирования и распорки
<div class="promo-collum"><p>Promo 1</p></div>
<div class="promo-collum"><p>Promo 2</p></div>
</div>
Тоже самое сделаем с блоками контента.
<div class="content layout-positioner clearfix"> - для контроля, центрирования и распорки
<div class="collum"><p>Left</p></div>
<div class="collum"><p>Main</p></div>
<div class="collum"><p>Right</p></div>
</div>
Футер у нас тоже растянут по всей ширине, а содержимое центрировано. Делаем по той же схеме, что и меню:
<div class="footer">
<div class="layout-positioner"><p>Footer</p></div>
</div>
Теперь осталось создать контейнер, который послужит нам фоном. Я решил это сделать в самом конце, не знаю почему. Еще раз посмотрев на пример, мы видим, что фоновый контейнер нам нужен для хедера, меню и промо-колонок. Значит эти контейнеры мы и поместим в наш фоновый контейнер.
В итоге имеем вот такой html-код:
<body>
<div class="container">
<div class="header layout-positioner"><p>Header</p></div>
<div class="menu">
<div class="layout-positioner"><p>Menu</p></div>
</div>
<div class="promo layout-positioner clearfix">
<div class="promo-collum"><p>Promo 1</p></div>
<div class="promo-collum"><p>Promo 2</p></div>
</div>
</div>
<div class="content layout-positioner clearfix">
<div class="collum"><p>Left</p></div>
<div class="collum"><p>Main</p></div>
<div class="collum"><p>Right</p></div>
</div>
<div class="footer">
<div class="layout-positioner"><p>Footer</p></div>
</div>
</body>
Теперь перейдем к CSS:
Для начала зададим стили для нашего центрирующего контейнера:
.layout-positioner {
width: 350px;
margin: 0 auto;
}
Далее зададим стили для нашего хедера:
.header {
background: #c0392b;
min-height: 35px;
margin-bottom: 10px;
box-sizing: border-box;
}
Поскольку я не большой фанат математических расчетов и движений пикселями, я буду использовать свойство box-sizing: border-box по возможности, чего и Вам советую.
Далее меню:
.menu {
background: #3498DB;
min-height: 35px;
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;}
Теперь наши промо-колонки:
.promo .promo-collum {
background: #c0392b;
min-height: 60px; - чтобы высота колонки зависела от содержимого, но была не ниже заданой выс.
margin-bottom: 10px;
width: 170px;
float: left;
margin-right: 10px;
box-sizing: border-box;
}
Убираем марджин справа у второй колонки
.promo .promo-collum:last-child {
margin-right: 0;
}
Дальше наш блок с контентом:
.content .collum {
background: #3498DB;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
width: 70px;
float: left;
min-height: 110px;
box-sizing: border-box;
}
Так увеличиваем размер второй колонки main:
.content .collum:nth-child(2) {
width: 190px;
}
И убираем марджин у последней:
.content .collum:last-child {
margin-right: 0;
}
Почему я не объясняю каждый шаг, как в предыдущих гайдах? Я считаю, что это уже пройденный материал, который все усвоили.
Теперь стили для распорки:
.clearfix::after {
display: table;
content: “”;
clear: both;
}
Дальше футер:
.footer {
background: #34495e;
min-height: 40px;
box-sizing: border-box;
}
В конце стили для нашего container что служит бекграундом:
.container {
background: #34495e;
box-sizing: border-box;
padding-top: 10px;
}
Осталось задать отступы всем названиям блоков:
p {
margin: 0;
padding: 5px;
}
Фиксированные высоты промо-колонок и блоков контента были заменены на тянущиеся (min-height).
Готово!
Задание выполнено на 100%. Я уверен можно решить и другими способами, можно решить более грамотно, можно написать еще более короткий код. Возможно я пересмотрю свою решение и сделаю по-другому, но сейчас у меня вышло так.
С радостью выслушаю Ваши советы по улучшению и сокращению кода и количества используемых классов. 
Спасибо за внимание.
