Schema di layout con wrapper multipli in CSS

Spesso durante lo sviluppo si incontrano layout, in cui i blocchi hanno lo sfondo per tutta la larghezza della pagina, mentre il contenuto di questi blocchi è centrato. Ecco un esempio di tale layout:

In un tale layout dovremo creare non uno, ma diversi wrapper - per ogni blocco. All'interno del wrapper dovrebbe esserci un altro blocco che centra il contenuto. Dovrebbe anche esserci una classe responsabile della colorazione del contenuto con lo sfondo.

Lo schema generale del nostro layout sarà il seguente:

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

La classe center sarà utilizzata per centrare i blocchi:

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

La classe line sarà utilizzata per colorare i blocchi:

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

E la classe wrapper sarà il genitore di ogni blocco. La useremo per impostare il margine tra i blocchi:

.wrapper {
	margin-bottom: 30px;
}

Ora scriviamo il codice completo del nostro compito:

<div class="wrapper">
	<div class="center">
		<h1>Intestazione principale del sito</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>La nostra azienda</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>I nostri prezzi</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>I nostri contatti</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

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