Šema izgleda sa više omotača u CSS-u

Često se u razvoju susreću izgledi (layouti), u kojima blokovi imaju pozadinu po celoj širini stranice, a sadržaj tih blokova je centriran. Evo primera takvog izgleda:

U takvom izgledu moraćemo da napravimo ne jedan omotač (wrapper), već nekoliko - za svaki blok. Pri tome unutar omotača mora biti još jedan blok koji vrši centriranje sadržaja. Takođe mora postojati klasa koja je zadužena za bojenje sadržaja pozadinom.

Opšta šema našeg izgleda će izgledati na sledeći način:

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

Klasa center će se koristiti za centriranje blokova:

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

Klasa line će se koristiti za bojenje blokova:

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

A klasa wrapper će biti roditelj svakog bloka. Koristićemo je za zadavanje razmaka između blokova:

.wrapper {
	margin-bottom: 30px;
}

Hajde sada da napišemo kompletan kod našeg zadatka:

<div class="wrapper">
	<div class="center">
		<h1>Glavni zaglavlje sajta</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Naša kompanija</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Naše cene</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Naši kontakti</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;
}