Layoutskema med flere wrappere i CSS

Ofte under udvikling støder man på layouts, hvor blokke har baggrund på hele sidens bredde, og indholdet af disse blokke er centreret. Her er et eksempel på sådan et layout:

I et sådant layout bliver vi nødt til at lave ikke én wrapper, men flere - til hver blok. Samtidig skal der inde i wrapperen være en anden blok, der udfører centrering af indholdet. Der skal også være en klasse, der er ansvarlig for at farve indholdet med baggrund.

Det generelle skema for vores layout vil se ud på følgende måde:

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

Klassen center vil blive brugt til at centrere blokke:

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

Klassen line vil blive brugt til at farve blokke:

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

Og klassen wrapper vil være forælder til hver blok. Vi bruger den til at indstille afstanden mellem blokke:

.wrapper {
	margin-bottom: 30px;
}

Lad os nu skrive den fulde kode for vores opgave:

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