Шема за распоред со повеќе wrapper-и во CSS

Често при развој се среќаваат распореди, во кои блоковите имаат позадина на целата ширина на страницата, а содржината на овие блокови стои во центар. Еве пример за таков распоред:

Во таков распоред ќе мора да направиме не еден wrapper, туку неколку - за секој блок. Притоа внатре во wrapper-от мора да има уште еден блок, кој ја извршува централизацијата на содржината. Исто така мора да има класа, која е одговорна за боерење на содржината со позадина.

Општата шема на нашиот распоред ќе изгледа на следниов начин:

html<div class="wrapper">
  <div class="center">
    
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    
  </div>
</div>
<div class="wrapper">
  <div class="center">
    
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    
  </div>
</div>

Класата center ќе се користи за централизирање на блоковите:

css.center {
  width: 800px;
  padding: 20px;
  margin: 0 auto;
}

Класата line ќе се користи за боерење на блоковите:

css.wrapper.line {
  background-color: #008040;
  color: white;
}

А класата wrapper ќе биде родител на секој блок. Ќе ја користиме за задавање на одделот помеѓу блоковите:

css.wrapper {
  margin-bottom: 30px;
}

Ајде сега да го напишеме целосниот код на нашата задача:

html<div class="wrapper">
  <div class="center">
    <h1>Главно заглавие на сајтот</h1>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Нашата компанија</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper">
  <div class="center">
    <h2>Нашите цени</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Нашите контакти</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.wrapper {
  margin-bottom: 30px;
}
.wrapper.line {
  background-color: #008040;
  color: white;
}
.center {
  width: 800px;
  padding: 20px;
  margin: 0 auto;
}
.wrapper h1 {
  margin: 0;
  font: 40px "Times New Roman";
}
.wrapper h2 {
  margin: 0;
  font: 25px "Times New Roman";
}
.wrapper p {
  font: 16px/1.4 Arial;
  text-align: justify;
}