Прошу оценки 27/32


#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="container">
        <div class="top"><p>Header</p></div>
      </div>
      <div class="center">
        <div class="container">
          <p>Menu</p>
        </div>
      </div>
      <div class="container">
        <div class="promo">
          <div class="promo-item"><p>Promo 1</p></div>
          <div class="promo-item"><p>Promo 2</p></div>
        </div>
      </div>
    </div>
    
    <!--Контент-->
    
    <div class="content">
      <div class="container">
        <div class="content-item"><p>Left</p></div>
        <div class="content-item"><p>Main</p></div>
        <div class="content-item"><p>Right</p></div>
      </div>
    </div>
    
    <!--Подвал-->
    
    <div class="footer">
      <div class="container">
        <p>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;
}

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

.container {
  width: 350px;
  margin: 0 auto;
}

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

.header .top {
  min-height: 35px;
  margin-bottom: 10px;
  background-color: #c0392b; 
}

.top p {
  padding: 5px 0 0 5px; 
}

.header .center {
   min-height: 35px;
   margin-bottom: 10px;
   background-color: #3498db;
}

.center p {
  padding: 5px 0 0 5px;  
}

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

.header .promo-item:last-child {
  margin: 0;
}

.promo-item p {
  padding: 5px 0 0 5px;  
}

.content {
  margin-bottom: 10px;  
}

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

.content-item:last-child {
  margin: 0;
}

 .content-item:nth-child(2) {
  width: 190px;
}

.content-item p {
  padding: 5px 0 0 5px;  
}

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

.footer p {
  padding: 5px 0 0 5px;  
}

p {
  margin: 0;  
}