Испытание [27/32] 100%. Пожалуйста, оцените код, укажите недочеты


#1

HTML

<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="top">
      <div class="header center"> Header</div>
      <div class="menu">Menu</div>
      <div class="center clearfix">
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
      </div>
    </div>
    <div class="bottom center clearfix">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
  </body>
</html>

CSS

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

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

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

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

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

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

.promo1,
.promo2 {
  background: #c0392b;
  width: 160px;
  height: 50px;
  padding: 5px 5px;
}

.promo1 {
  float: left;
  margin-right: 10px;
}

.promo2 {
  float: right;
}

.center {
  margin-left: auto;
  margin-right: auto; 
}

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

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

.left {
  margin-right: 10px;
}

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

.bottom {
 padding-bottom: 10px; 
}

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

/*
  Используемые цвета:
  #34495e – мокрый асфальт
  #c0392b – красный
  #3498db – синий
*/

#2

Вам сюда: Испытание [27/32] 100%. Укажите ,пожалуйста, на мои ошибки в коде