27/32 без clearfix'a, оцените пожалуйста


#1

Оцените пожалуйста, что можно исправить?

HTML

Summary
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
<header>
  <div class="wrapper">
      <div class="header content">
      Header
      </div>
      </div>
  </header>

<nav>
    <div class="wrapper">
      <div class="menu content">Menu</div>
       </div>
  </nav>
  
<section>
         <div class=wrapper>
<div class="column1 content">Promo 1</div>
<div class="column2 content">Promo 2</div>
  </div>
  </section>
    
<main>
      <div class="wrapper">
    <div class="left block content">Left</div>
    <div class="main content">Main</div>
    <div class="right block content">Right</div>
    </div>
  </main>
  
<footer>
      <div class="wrapper">
        <div class="footer content">
        Footer
    </div> </div>
  </footer>
  
  </body>
</html>
`

CSS

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

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

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

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


header, nav, section, main, footer {
  overflow:hidden;
  min-width: 350px;
}

header {
  background-color: #34495e;
  min-height: 55px;

  }

.wrapper {
  margin: 0 auto;
  width: 350px;
  min-height: 25px;

}

.header {
  background-color: #c0392b;
  margin-top: 10px;
}
.content {
  
 
  padding: 5px;
  min-height: 25px;
  margin-bottom: 10px;
  
}

nav {
   background-color: #3498db;
   #3498db;
   min-height: 35px;
 
}
.menu {
min-height: 10px;

}

section {
background-color: #34495e;
min-height: 80px
}

.column1 , .column2 {
  background-color: #c0392b;
  min-height: 50px;
  width: 160px;
  margin-top: 10px;

  
}
.column1 {
  float:left;
}

.column2 {
  float:right;
}

main {
 min-height: 120px;

}

.left, .right, .main {
  background-color: #3498db;
  float: left;
  margin-top: 10px;
}

.block {
  width: 60px;
  min-height: 100px;
}

.main {
  width: 180px;
  min-height: 100px;
  margin: 10px;
  
}
 footer {
  background-color: #34495e;
  min-height: 30px;

 }
.footer { 

#2

Без “px” не работает.


#3

Спасибо, это опечатка скорее)
Меня больше интересует структура и грамотность кода


#4

Грамотно будет с clearfix. И если у вас есть центровщик с определенной шириной, то дублировать такую же ширину в других селекторах уже не надо. Просто пользуйтесь центровщиком, добавляя класс нужным блокам.


#5

Грамотно будет с clearfix.

А зачем? Какая разница?По поводу дублирования ширины не понял, где я ее там дублировал?