Esquema de diseños con múltiples wrappers en CSS

Frecuentemente en el desarrollo nos encontramos con diseños, en los que los bloques tienen fondo a lo ancho de la página, y el contenido de estos bloques está centrado. He aquí un ejemplo de tal diseño:

En tal diseño tendremos que hacer no un wrapper, sino varios - para cada bloque. Al mismo tiempo, dentro del wrapper debe haber otro bloque que realice la centración del contenido. También debe haber una clase responsable de colorear el contenido con fondo.

El esquema general de nuestro diseño se verá de la siguiente manera:

<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 clase center se utilizará para centrar bloques:

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

La clase line se utilizará para colorear bloques:

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

Y la clase wrapper será el padre de cada bloque. La usaremos para establecer el margen entre bloques:

.wrapper {
	margin-bottom: 30px;
}

Ahora escribamos el código completo de nuestra tarea:

<div class="wrapper">
	<div class="center">
		<h1>Encabezado principal del sitio</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Nuestra empresa</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Nuestros precios</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Nuestros contactos</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;
}