Schéma de mise en page avec plusieurs wrappers en CSS

Souvent lors du développement, on rencontre des maquettes dans lesquelles les blocs ont un fond sur toute la largeur de la page, mais le contenu de ces blocs est centré. Voici un exemple d'une telle maquette :

Dans une telle maquette, nous devrons créer non pas un wrapper, mais plusieurs - pour chaque bloc. De plus, à l'intérieur du wrapper, il doit y avoir un autre bloc qui effectue le centrage du contenu. Il doit également y avoir une classe responsable de la coloration du contenu par le fond.

Le schéma général de notre maquette sera le suivant :

<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 sera utilisée pour centrer les blocs :

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

La classe line sera utilisée pour colorer les blocs :

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

Et la classe wrapper sera le parent de chaque bloc. Nous l'utiliserons pour définir l'espacement entre les blocs :

.wrapper {
	margin-bottom: 30px;
}

Écrivons maintenant le code complet de notre tâche :

<div class="wrapper">
	<div class="center">
		<h1>Main site header</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our company</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Our price</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our contacts</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;
}