Схема макетов с несколькими врапперами

Часто при разработке встречаются макеты, в которых блоки имеют фон на всю ширину страницы, а содержимое этих блоков стоит по центру. Вот пример такого макета:

В таком макете нам придется сделать не один враппер, а несколько - для каждого блока. При этом внутри враппера должен быть еще один блок, выполняющий центрирование содержимого. Также должен быть класс, отвечающий за покраску содержимого фоном.

Общая схема нашего макета будет выглядеть следующим образом:

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