27/32 --- 100% Прошу фидбэк на код

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

Screenshot_1
Screenshot_1.png1904×1033 64.3 KB

CSS

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

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

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

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

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

.header {
min-height: 25px;
margin: 0 50px;
padding: 5px 5px;
background-color: #c0392b;
}

.menu {
width: 340px;
min-height: 25px;
background-color: #3498db;
float: left;
margin: 10px 0;
padding: 5px 55px;
}

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

.promo:last-child {
float: right;
margin-left: 0;
margin-right: 50px;
}

.columns {
padding: 10px 50px;
}

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

.layout:nth-child(2n) {
width: 180px;
}

.layout:last-child {
margin-right: 0;
}

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

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

2

у вас в коде отсутствует центровщик: увеличьте ширину боди, а блоки все равно останутся “прилипшими” к левому краю (расстояние до левого края останется все тем же -прописанным в паддингах-маргинах)

3

Так правильно?

Screenshot_3
Screenshot_3.png1904×1035 66.9 KB

CSS

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

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

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

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

.center-block {
width: 340px;
margin-right: auto;
margin-left: auto;
}

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

.header {
min-height: 25px;
padding: 5px 5px;
background-color: #c0392b;
}

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

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

.promo-1 {
margin-left: -5px;
}

.promo-2 {
float: right;
margin-right: -5px;
}

.columns {
padding: 10px 50px;
}

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

.layout-1 {
margin-left: -5px;
}

.layout-2 {
width: 180px;
}

.layout-3 {
margin-right: -5px;
}

.footer {
min-height: 25px;
padding: 5px 0;
background-color: #34495e;
}

4

100% но хотелось бы максимально улучшить. Буду рада если прокомментируете!

<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-block">Header</div>
      </div>
    </div>
    
    <div class="menu">
      <div class="layout-positioner">Menu</div>
    </div>
    
    <div class="promos">
      <div class="layout-positioner">
        <div class="promo">Promo 1</div>
        <div class="promo">Promo 2</div>
      </div>
    </div>
    
    <div class="features">
      <div class="layout-positioner">
        <div class="column left">Left</div>
        <div class="column main">Main</div>
        <div class="column right">Right</div>
      </div>
    </div>
    
    <div class="footer">
      <div class="layout-positioner">
        <div class="footer-block">Footer</div>
      </div>
    </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;
}

.layout-positioner {
  width: 350px;
  margin: 0 auto;
}

.layout-positioner::after {
  content: "";
  display: table;
  clear: both;
}

.header {
  background-color: #34495e;
  
}

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

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


.promos {
  background-color: #34495e;
  margin-bottom: 10px;
}
  
.promo {
  width: 160px;
  padding: 5px;
  height: 50px;
  background-color: #c0392b;
  float: left;
  margin: 10px 10px 10px 0;  
}
  
.promo:last-child {
  margin-right: 0;
}
  
.features {
  margin-bottom: 10px;  
}

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

.left {
  width: 60px;
  padding: 5px;
}

.main { 
  width: 180px;
  padding: 5px;  
}

.right {
  width: 60px;
  margin-right: 0;
  padding: 5px;
}

.footer {
  background-color: #34495e;
  height: 35px;  
}

.footer-block {
  padding: 5px;
}