To create a full-width element with inner text contained within a specific width, apply a background color to the full-width element and wrap the inner text in another element matching the width of your content section. For instance, use a class like .viewport
to define the width of the content area.
.box {
background: #09c;
color: #fff;
}
.viewport {
width: 80%;
max-width: 960px;
margin: auto;
}
.content {
background: #eee;
padding: 1em 0 0;
}
.content .viewport {
background: #fff;
}
<div class="box">
<div class="viewport">Join our community</div>
</div>
<nav class="viewport">navigation</nav>
<div class="content">
<div class="viewport">Content section<br>Content section</div>
</div>