Layout-Schema mit mehreren Wrappern in CSS

Bei der Entwicklung trifft man häufig auf Layouts, in denen Blöcke einen Hintergrund über die gesamte Seitenbreite haben, der Inhalt dieser Blöcke jedoch zentriert ist. Hier ist ein Beispiel für ein solches Layout:

In einem solchen Layout müssen wir nicht einen, sondern mehrere Wrapper erstellen - für jeden Block. Gleichzeitig sollte sich innerhalb des Wrappers ein weiterer Block befinden, der den Inhalt zentriert. Außerdem sollte es eine Klasse geben, die für das Einfärben des Inhalts mit einem Hintergrund verantwortlich ist.

Das allgemeine Schema unseres Layouts wird wie folgt aussehen:

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

Die Klasse center wird verwendet, um Blöcke zu zentrieren:

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

Die Klasse line wird verwendet, um Blöcke einzufärben:

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

Und die Klasse wrapper wird der Elterncontainer jedes Blocks sein. Wir verwenden sie, um einen Abstand zwischen den Blöcken festzulegen:

.wrapper {
	margin-bottom: 30px;
}

Schreiben wir nun den vollständigen Code für unsere Aufgabe:

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