Σχέδιο Διάταξης με Πολλαπλά Wrappers σε CSS

Συχνά στην ανάπτυξη συναντάμε διατάξεις, στις οποίες τα μπλοκ έχουν φόντο σε όλο το πλάτος της σελίδας, ενώ τα περιεχόμενά τους είναι κεντραρισμένα. Ακολουθεί ένα παράδειγμα τέτοιας διάταξης:

Σε μια τέτοια διάταξη θα πρέπει να φτιάξουμε όχι ένα wrapper, αλλά πολλά - ένα για κάθε μπλοκ. Εντός του wrapper πρέπει να υπάρχει ένα ακόμη μπλοκ που εκτελεί το κεντράρισμα του περιεχομένου. Επίσης, πρέπει να υπάρχει μια κλάση που είναι υπεύθυνη για το χρωματισμό του περιεχομένου με φόντο.

Το γενικό σχήμα της διάταξής μας θα μοιάζει ως εξής:

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

Η κλάση center θα χρησιμοποιείται για το κεντράρισμα των μπλοκ:

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

Η κλάση line θα χρησιμοποιείται για το χρωματισμό των μπλοκ:

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

Και η κλάση wrapper θα είναι ο γονέας κάθε μπλοκ. Τη χρησιμοποιούμε για να ορίσουμε το κενό μεταξύ των μπλοκ:

.wrapper {
	margin-bottom: 30px;
}

Ας γράψουμε τώρα τον πλήρη κώδικα της άσκησής μας:

<div class="wrapper">
	<div class="center">
		<h1>Κύρια επικεφαλίδα ιστότοπου</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Η εταιρεία μας</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Οι τιμές μας</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Οι επαφές μας</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;
}