Postavitev z več ovojniki v CSS

Pri razvoju se pogosto srečujemo z postavitvami, kjer imajo bloki ozadje po celotni širini strani, medtem ko je vsebina teh blokov centrirana. Tu je primer takšne postavitve:

V takšni postavitvi bomo morali narediti ne enega ovojnika, ampak več - za vsak blok. Poleg tega mora biti znotraj ovojnika še en blok, ki izvaja centriranje vsebine. Prav tako mora obstajati razred, odgovoren za barvanje vsebine z ozadjem.

Splošna shema naše postavitve bo videti takole:

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>

Razred center bo uporabljen za centriranje blokov:

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

Razred line bo uporabljen za barvanje blokov:

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

Razred wrapper pa bo nadrejeni vsakega bloka. Uporabili ga bomo za določanje odmika med bloki:

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

Zdaj pa napišimo popolno kodo naše naloge:

html<div class="wrapper">
  <div class="center">
    <h1>Glavna glava spletnega mesta</h1>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Naše podjetje</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper">
  <div class="center">
    <h2>Naša cena</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Naši kontakti</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;
}