Строим сетку[27/32] Как сюда впихнуть right?И как улучшить код?

Курсы §15. Сетки
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="layout-positioner">
    <div class="header-text"> Header</div></div>
   <div class="menu ">Menu</div>
   <div class="layout-positioner ">
 <div class="promo-1"> Promo 1</div>
   <div class="promo-2"> Promo 2</div></div></div>

 <div class="content">
   <div class="layout-positioner">
   <div class="left"> Left</div>
     <div class="main"> Main</div>
     <div class="right"> Right</div></div>
     </div>
     
    <div class="footer"> Footer</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{
background:#34495e;
width:450px;
min-height:170px;
float:left;
margin-bottom:10px;

}
.header-text,.promo-1,.promo-2{
background:#c0392b;
}
.layout-positioner{
box-sizing:border-box;
width:350px;
margin:auto;
}
.menu{
width:340px;
background:#3498db;
padding:5px 55px;
min-height:25px;
margin:10px 0 10px;

}
.header-text{
min-height:25px;
margin:10px 0 10px;
padding:5px;
}

.promo-1,.promo-2{
width:160px;
padding:5px;
min-height:50px;
}
.promo-1{
float:left;
}
.promo-2{
float:right;
}

.content{

width:450px;

clear:both;
}
.left,.main{
background:#3498db;
min-height:100px;
padding:5px;

}
.left{
width:60px;
float:left;
}
.main{
float:right;
width:180px;
margin-right:80px;
}

.footer{

background:#34495e;
width:450px;
min-height: 25px;
padding:5px 55px;
}

2

А вы для блока .right стили писали?

3

Писал,но он стоит под left,я не знаю,Как его по-другому впихнуть

4

Может лучше left поставить. А для блока .right соответственно right.

5

Блок .main

Это слишком большой отступ.

6

Сделал теперь вот так получаетсяffffff

7

У вас такие стили получились?

.left,
.main, 
.right {
  background: #3498db;
  min-height: 100px;
  padding: 5px;
}

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

.right {
  width: 60px;
  float: right; 
}

.main {
  float: left;
  width: 180px;
}
8

Да,такие

10

В общем,я перепишу код)

11

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

12

Еще используйте блок со стилем

.clear {
  clear:both;
}
13

Правильно: много ошибок.
Разберитесь как всё работает в предыдущем задании.