Lay-outschema met meerdere wrappers in CSS

Bij ontwikkeling komen vaak lay-outs voor, waarin blokken een achtergrond over de volledige breedte van de pagina hebben, maar de inhoud van deze blokken in het midden staat. Hier is een voorbeeld van zo'n lay-out:

In zo'n lay-out zullen we niet één wrapper moeten maken, maar meerdere - voor elk blok. Tegelijkertijd moet er binnen de wrapper nog een blok zijn dat de inhoud centreert. Er moet ook een klasse zijn die verantwoordelijk is voor het kleuren van de inhoud met een achtergrond.

Het algemene schema van onze lay-out ziet er als volgt uit:

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

De klasse center zal worden gebruikt voor het centreren van blokken:

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

De klasse line zal worden gebruikt voor het kleuren van blokken:

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

En de klasse wrapper zal de ouder zijn van elk blok. We gebruiken hem om de afstand tussen blokken in te stellen:

.wrapper {
	margin-bottom: 30px;
}

Laten we nu de volledige code voor onze taak schrijven:

<div class="wrapper">
	<div class="center">
		<h1>Hoofdkop van de website</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Ons bedrijf</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Onze prijs</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Onze contacten</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;
}