27/32 - 100% А можно так?

  <body>
    <div class="top">
      <div class="layout-positioner">
        <div class="header">Header</div>
      </div>  
        <div class="menu">
          <div class="layout-positioner">
            Menu
          </div> 
        </div>
      <div class="layout-positioner">  
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
      </div>  
    </div>
    
    <div class="features">
      <div class="layout-positioner">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
      </div>
    </div>
    
    <div class="footer">
      Footer
    </div>    
  </body>

.top {
 background-color: #34495e;
 padding: 10px 0;
 margin-bottom: 10px;
}

.layout-positioner {
  width: 350px;
  margin: 0px auto;
  /*border: 2px dashed white;  */
}

.layout-positioner::after {
  content: "";
  display: table;
  clear: both;
}

.header {
  background-color: #c0392b;
  height: 25px;
  padding: 5px 5px;
}

.menu {
  background-color: #3498db;
  height: 25px;
  padding: 5px 55px;
  margin: 10px 0;
}

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

.promo2 {
  float: left;
  padding: 5px 5px;
  background-color: #c0392b;
  height: 50px;
  width: 160px;
}

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

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

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

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

Собственно результат 100%, но очень хочется понять насколько он правильный, логичный Огромная просьба, помогите пожалуйста с оценкой и советом, что можно сделать лучше (или вообще нужно делать по другому).

1 лайк

Спасибо