Esquema de layouts com múltiplos wrappers em CSS

Frequentemente, durante o desenvolvimento, encontramos layouts em que os blocos têm fundo em toda a largura da página, e o conteúdo desses blocos está centralizado. Aqui está um exemplo de tal layout:

Nesse layout, teremos que fazer não um wrapper, mas vários - para cada bloco. Além disso, dentro do wrapper deve haver outro bloco, realizando a centralização do conteúdo. Também deve haver uma classe responsável pela coloração do conteúdo com fundo.

O esquema geral do nosso layout será o seguinte:

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>

A classe center será usada para centralizar os blocos:

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

A classe line será usada para colorir os blocos:

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

E a classe wrapper será o pai de cada bloco. Vamos usá-la para definir o espaçamento entre os blocos:

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

Agora vamos escrever o código completo da nossa tarefa:

html<div class="wrapper">
  <div class="center">
    <h1>Cabeçalho principal do site</h1>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Nossa empresa</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper">
  <div class="center">
    <h2>Nossos preços</h2>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>
<div class="wrapper line">
  <div class="center">
    <h2>Nossos contatos</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;
}