Схема макетаў з некалькімі абгорткамі ў CSS

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

У такім макеце нам прыйдзецца зрабіць не адну абгортку, а некалькі - для кожнага блока. Пры гэтым унутры абгорткі павінен быць яшчэ адзін блок, які выконвае цэнтраванне зместу. Таксама павінен быць клас, які адказвае за афарбоўку зместу фоном.

Агульная схема нашага макета будзе выглядаць наступным чынам:

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