Layoutschema med flera wrappers i CSS

Ofta i utvecklingen stöter man på layouter, där blocken har bakgrund över hela sidans bredd, medan innehållet i dessa block är centrerat. Här är ett exempel på en sådan layout:

I en sådan layout kommer vi att behöva skapa inte en wrapper, utan flera - för varje block. Samtidigt ska det inuti wrappern finnas ytterligare ett block som centrerar innehållet. Det bör också finnas en klass som ansvarar för att färga innehållet med en bakgrund.

Den övergripande schemat för vår layout kommer att se ut som följer:

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

Klassen center kommer att användas för att centrera block:

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

Klassen line kommer att användas för att färga block:

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

Och klassen wrapper kommer att vara förälder till varje block. Vi använder den för att sätta avstånd mellan block:

.wrapper {
	margin-bottom: 30px;
}

Låt oss nu skriva den fullständiga koden för vår uppgift:

<div class="wrapper">
	<div class="center">
		<h1>Huvudrubrik för webbplatsen</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Vårt företag</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Vårt pris</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Våra kontakter</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;
}