Испытание: строим сетку [27/32]. Прошу советов!

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

Что то мне тяжело зашла эта тема. Вот все в принципе легко идет, но вот формирование сетки с кучей дивов сводят с ума. Врапер блоков, врапер врапера.
В общем по ощущениям я слепил ее очень топорно.
Подскажите на что обратить внимание, что можно было сделать лучше

<div class="header_wrapper">
        <div class="header_column">Header</div>
        <div class="menu_column">Menu</div>
        <div class="promo_wrapper clearfix">
          <div class="promo_column promo1">Promo 1</div>
          <div class="promo_column promo2">Promo 2</div>
        </div>
    </div>
    <div class="content clearfix">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
    </div>
      <div class="footer">Footer</div>

.header_wrapper {
  background-color: #34495e;  
  padding-top: 10px;
}

.header_column {
  width: 340px;
  margin: 0 auto;
  background-color:  #c0392b;
  padding: 5px;
  min-height: 25px;
  margin-bottom: 10px;
}

.menu_column {
  min-height: 25px;
  padding: 5px 55px;
  background-color:  #3498db;
}
.promo_wrapper {
  padding: 10px 50px; 
}

.promo_column {
  float: left;
  min-height: 50px;
  width: 160px;
  background-color:  #c0392b; 
  margin-right: 10px;
  padding: 5px;
}

.promo_column:last-child {
  margin-right: 0;
}

.left {
  float: left;  
  background-color:  #3498db;
  min-height: 100px;
  width: 60px;
  margin-right: 10px;
  padding: 5px;
}

.main {
  float: left;  
  background-color:  #3498db;
  min-height: 100px;
  width: 180px;
  margin-right: 10px;
  padding: 5px;
}

.right {
  float: left;  
  background-color:  #3498db;
  min-height: 100px;
  width: 60px;
  padding: 5px;
  
}

.content {; 
  padding: 10px 50px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  min-height: 25px;
  padding: 5px 55px;
  background-color:  #34495e;  
}