At this point, I'm aware that the markup of the test site won't easily let us achieve what I would like, design wise. Therefore, I'm going to make some amendments to the markup. For the sake of brevity, I won't bore you with the changes here. If you want to see exactly what changed, simply compare the code from this chapter and Chapter 3, Nesting, Extend, Placeholders and Mixins. However, here are just a few points of note.

A wrapping div element (each with class that begins with inner) is being added to the content inside the <header> and <footer> and a wrapping div tag around the main content and navigation areas. In the _layout.scss partial file, it has then allowed removal of the rules associated with the body tag, and instead we can add the following code:

[class ^="inner"] {
  max-width: 75em;
  margin: auto;
}