27/32 100%

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

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

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

header {
  background-color: #34495e;
  min-height: 45px;
  padding-top: 10px;
}
.header-block {
  width: 340px;
  background-color: #c0392b;
  min-height: 25px;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}
.menu {
 min-height: 30px;
 background-color: #3498db;
 padding-top: 5px;
 
}
.menu span {
  margin-left: 55px;
}
.content {
  background-color: #34495e;
  min-height: 80px;
  padding-left: 50px;
  padding-right: 50px;
}

.promo1 {
 margin-top: 10px;
 float: left;
 width: 160px;
 min-height: 50px;
 background-color: #c0392b;
 padding: 5px;
}
.promo2 {
  margin-top: 10px;
  float: right;
  width: 160px;
  min-height: 50px;
  background-color: #c0392b;
  padding: 5px;
}
.group {
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  margin-top: 10px;
}

.left {
  float: left;
  min-height: 100px;
  background-color: #3498db;
  padding: 5px;
  width: 60px;
  margin-right: 10px;
}
.right {
  float: right;
  min-height: 100px;
  background-color: #3498db;
  padding: 5px;
}
.main {
  background-color: #3498db;
  width: 180px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}
.col {
 width: 60px; 
}
footer {
  clear: both;
  background-color: #34495e;
  margin-top: 10px;
  min-height: 30px;
  padding-left: 55px;
  padding-top: 5px;
}

Получилось сделать задание на 100%, но только после того, как в html коде вынес центральный блок main выше left и right. Правильно ли решение? или я не полностью усвоил материал для прохождения?