Schemat układu z wieloma wrapperami w CSS

Często podczas rozwoju napotyka się układy, w których bloki mają tło na całą szerokość strony, a zawartość tych bloków jest wyśrodkowana. Oto przykład takiego układu:

W takim układzie będziemy musieli zrobić nie jeden wrapper, a kilka - dla każdego bloku. Jednocześnie wewnątrz wrappera musi być jeszcze jedna ramka, która wykonuje wyśrodkowanie zawartości. Powinna też być klasa odpowiedzialna za pokrycie zawartości tłem.

Ogólny schemat naszego układu będzie wyglądał następująco:

<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 będzie używana do wyśrodkowania bloków:

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

Klasa line będzie używana do kolorowania bloków:

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

A klasa wrapper będzie rodzicem każdego bloku. Użyjemy jej do ustawienia odstępu między blokami:

.wrapper {
	margin-bottom: 30px;
}

Napiszmy teraz pełny kod naszego zadania:

<div class="wrapper">
	<div class="center">
		<h1>Główny nagłówek strony</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Nasza firma</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Nasze ceny</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Nasze 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;
}