Испытание строим сетку [27/32] 100%

Курсы §15. Сетки
1

Добрый день!

Долго мучилась и не знаю, толком, разобралась или нет.
Вот у меня 100% получилось, но уверенность понимания на 50% :)))
Подскажите, верен ли ход мыслей, как можно оптимизировать код, если нужно. И еще вопрос - подскажите, где еще можно попрактиковать построение сеток. Я новичок, который учиться с нуля здесь, и когда получается, то хочется еще и еще :slight_smile:

HTML:

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

CSS:

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

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

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

.wrapper{
width: 400px;
margin: 0 auto;
}

.header1{
background-color: #34495e; 
padding: 10px 0;
}

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

.header3{
  background-color: #34495e;
  padding: 0px 0;
}

.promo{
  margin: 0px 10px 0px 40px;
  
}

.promo .section{
background-color: #c0392b;
width: 160px;
min-height: 50px;
float: left;
margin-right: 10px;
padding: 5px;
}

.section.promo1{
  margin: 10px 10px;
}

.section.promo2{
  margin: 10px auto;
}

.features{
margin: 10px 10px 10px 50px;
}

.features .column{
background-color: #3498db;
min-height: 100px;
float: left;
margin-right:10px;
padding: 5px;
}

.column.left-right, .column.right{
  margin: 10 auto;
  width: 60px;
}

.column.main{
  margin: 10 Auto;
  width: 180px;
}


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

.Footer{
min-height: 35px;
background-color: #34495e;
padding-left: 55px;
padding-top: 5px;
}

.top{
background-color: #c0392b;
min-height: 30px;
margin: 0px 50px;
padding-top: 5px;
padding-left: 5px;
}

.menu{
min-height: 30px;
padding-left: 55px;
padding-top: 5px;
}

Спасибо за советы!

2 
  <body>
<div class="container clearfix">       
<div class="header"> Header   </div>
<div class="menu">Menu        </div>
<div class="promo promo1">Promo 1   </div>
<div class="promo promo2">Promo 2   </div>   

<div class="clearfix">
<div class="block block-left">Left</div>
<div class="block block-main">Main</div>
<div class="block block-right">Right</div>
</div>

<div class="footer clearfix">
Footer
</div>

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

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

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.container {
width:450px;
background-color:#34495e;
padding: 10px 0;
}

.header {
width:340px;
background-color:#c0392b;
margin: 0 auto;
padding: 5px;
min-height: 25px;
}
.menu {
background-color: #3498db;
width:395px;
margin: 10px auto;
min-height: 30px;
padding-left: 55px;
padding-top: 5px;
}

.promo1{

background-color:#c0392b;
float:left;
width: 160px;
min-height:50px;
margin-left:50px;
padding:5px;
}

.promo2{
background-color:#c0392b;
float:right;
width: 160px;
min-height:50px;
margin-right:50px;
padding:5px;
}

.block{
background-color: #3498db;
margin: 10px 5px;
min-height: 100px;
padding:5px;
}

.block-left{
float:left;
width:60px;
margin-left:50px
}

.block-main{
float:left;
width:180px;
}

.block-right{
float:left;
width:60px;
}

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

.clearfix::after {
content: “”;
display: table;
clear: both;
}