Schéma rozvržení s více obalovými prvky v CSS

Při vývoji se často setkáváme s rozvrženími, ve kterých mají bloky pozadí na celou šířku stránky, ale obsah těchto bloků je vycentrovaný. Zde je příklad takového rozvržení:

V takovém rozvržení budeme muset vytvořit ne jeden obalový prvek, ale několik - pro každý blok. Přitom uvnitř obalového prvku musí být ještě jiný blok, který provádí centrování obsahu. Také musí existovat třída, která zodpovídá za obarvení obsahu pozadím.

Obecné schéma našeho rozvržení bude vypadat následovně:

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

Třída center bude použita pro centrování bloků:

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

Třída line bude použita pro obarvení bloků:

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

A třída wrapper bude rodičem každého bloku. Použijeme ji pro nastavení odsazení mezi bloky:

.wrapper {
	margin-bottom: 30px;
}

Nyní napišme úplný kód našeho úkolu:

<div class="wrapper">
	<div class="center">
		<h1>Hlavní záhlaví webu</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Naše společnost</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Naše ceny</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Naše kontakty</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;
}