Схема макетів із кількома врапперами

Часто при розробці зустрічаються макети, у яких блоки мають фон на всю ширину сторінки, а вміст цих блоків стоїть у центрі. Ось приклад такого макету:

У такому макеті нам доведеться зробити не один враппер, а кілька – для кожного блоку. При цьому всередині враппера має бути ще один блок, який виконує центрування вмісту. Також має бути клас, який відповідає за фарбування вмісту фону.

Загальна схема нашого макету виглядатиме наступним чином:

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

Клас center буде використовуватися для центрування блоків:

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

Клас line буде використовуватися для фарбування блоків:

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

А клас wrapper буде батьком кожного блоку. Використовуємо його для завдання відступу між блоками:

.wrapper {
	margin-bottom: 30px;
}

Давайте тепер напишемо повний код нашого завдання:

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