27/32 Ну как-то вот так. Оцените пожалуйста

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="layout-positioner">
        <p class="header-content">Header</p>
      </div>
    </div>
    
    <div class="menu">
      <div class="layout-positioner">
        <p class="menu-content">Menu</p>
      </div>    
    </div> 
    
    <div class="promo">
      <div class="layout-positioner cleatfix">
        <div class="promo-col promo-col-1">
          <p class="promo-content">Promo 1</p>
        </div>
        <div class="promo-col promo-col-2">
          <p class="promo-content">Promo 2</p>
        </div>
      </div>
    </div>
    
    <div class="columns">
      <div class="layout-positioner cleatfix">
        <div class="left-column column">
          <p class="left-content">Left</p>
        </div>
        <div class="main-column column">
          <p class="main-content">Main</p>
        </div>
        <div class="right-column column">
          <p class="right-content">Right</p>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <div class="layout-positioner clearfix">
        <p class="footer-content">Footer</p>
      </div>
    </div>
  </body>
</html>

Стили:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

.cleatfix {
  content: "";
  display: table;
  clear: both;
}

p {margin: 0; padding: 5px;}

.layout-positioner {
  width: 350px;
  margin: 0 auto;
}

.header, .promo, .columns, .footer{
  padding: 10px;
  background-color: #34495e;
}

.header-content {
  min-height: 25px;
  background-color: #c0392b;  
}

.menu {background-color: #3498db;}

.menu-content {min-height: 25px;}

.promo-col {
  float: left;
  width: 170px;
  height: 60px;
  margin-right: 10px;
  background-color: #c0392b;  
}

.promo-col-2 {margin-right: 0;}

.columns {background-color: #fff;}

.column {
  float: left;
  width: 70px;
  min-height: 110px;
  margin-right: 10px;
  background-color: #3498db;
}

.main-column {width: 190px;}

.right-column {margin-right: 0;}

.footer {padding: 0;}

.footer-content {
  background-color: #34495e;
  min-height: 25px;
}
2

Попробуйте добавить в любой из блоков (лучше в каждый) немного контента… и оцените сами.

3

Ну можно добавить перенос строк в word-wrap: break-word; в

и min-height в одном месте. Но такое к заданию не относится ведь. Подобные вещи стали бы сразу видны и устранены, если бы был готовый psd-макет, а не просто схема.

4
У Вас так:

2018-10-06_135320
2018-10-06_135320.png450×607 5.79 KB

Мне почему-то кажется, что должно быть так:

2018-10-06_140151
2018-10-06_140151.png450×728 9.11 KB

5

Я же сказал

можно добавить перенос строк word-wrap: break-word; в p
и min-height в одном месте.

Стили

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

.cleatfix {
  content: "";
  display: table;
  clear: both;
}

p {margin: 0; padding: 5px; word-wrap: break-word;}

.layout-positioner {
  width: 350px;
  margin: 0 auto;
}

.header, .promo, .columns, .footer{
  padding: 10px;
  background-color: #34495e;
}

.header-content {
  min-height: 25px;
  background-color: #c0392b;  
}

.menu {background-color: #3498db;}

.menu-content {min-height: 25px;}

.promo-col {
  float: left;
  width: 170px;
  min-height: 60px;
  margin-right: 10px;
  background-color: #c0392b;  
}

.promo-col-2 {margin-right: 0;}

.columns {background-color: #fff;}

.column {
  float: left;
  width: 70px;
  min-height: 110px;
  margin-right: 10px;
  background-color: #3498db;
}

.main-column {width: 190px;}

.right-column {margin-right: 0;}

.footer {padding: 0;}

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