Schéma rozloženia s viacerými obalmi v CSS

Pri vývoji sa často stretávame s rozloženiami, v ktorých bloky majú pozadie na celú šírku stránky, ale obsah týchto blokov je vycentrovaný. Tu je príklad takéhoto rozloženia:

V takomto rozložení budeme musieť vytvoriť nie jeden obal, ale niekoľko - pre každý blok. Zároveň musí byť vo vnútri obalu ďalší blok, ktorý vycentruje obsah. Tiež musí existovať trieda, ktorá je zodpovedná za farbu pozadia obsahu.

Všeobecná schéma nášho rozloženia bude vyzerať nasledovne:

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

Trieda center bude použitá na centrovanie blokov:

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

Trieda line bude použitá na farebné vyplnenie blokov:

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

A trieda wrapper bude rodičom každého bloku. Použijeme ju na nastavenie odsadenia medzi blokmi:

.wrapper {
	margin-bottom: 30px;
}

Poďme teraz napísať úplný kód našej úlohy:

<div class="wrapper">
	<div class="center">
		<h1>Hlavná hlavička stránky</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Naša spoločnosť</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;
}