Поздравляем с созданием первой сложной сетки! Теперь давайте немного усложним её. Мы будем делать сетку, у которой фон хедера и футера растягивается на всю ширину окна браузера, вот так:

Сначала нам нужно изменить HTML-разметку. Мы избавимся от блока wrapper, который центрует всё содержание страницы.

Затем нужно будет добавить внутрь хедера, контента и футера дополнительный блок, который будет центровать их содержимое. Вот так:

<div class="header clearfix">
  <div class="layout-positioner">
    <!-- блоки колонок -->
  </div>
</div>