CSSにおける複数ラッパーレイアウトスキーム

開発においてよく出会うレイアウトとして、 ブロックがページ幅全体に背景を持ち、 そのブロック内のコンテンツは中央に配置されるものがあります。 以下はそのようなレイアウトの例です：

このようなレイアウトでは、1つのラッパーではなく、 各ブロックごとに複数のラッパーを作成する必要があります。 さらに、ラッパー内にはコンテンツを中央揃えする 別のブロックが必要です。 また、背景色を設定するためのクラスも必要です。

このレイアウトの全体スキームは以下のようになります：

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;
}