Apply clearfix to article header and footer

At very small resolutions the right-hand contents of the article header
and footer would flow out of the div border. Using the clearfix class
expands the div to include the entire contents.
Change the body/menu ratio to 9:3

The changed ratio means a little less wasted space in the menu column,
and as a result the font size has been increased to help improve
readability.

Updated Bootstrap customised settings:
- Choose components
    - Responsive
        - Large desktops (>1200px): untick
- Customize variables
    - Links
        - @linkColor: #3a0
    - Typography
        - @baseFontSize 16px
        - @baseLineHeight: 24px
Justify article text

Justified text looks a bit better than left aligned text
Reduce header sizes

Reduce the size of the headers so they fit a bit better, and the article
titles are less likely to wrap-around.
Decrease the size of the page header bottom margin

The gap between the page header and the content seems a little big, so
lets reduce the gap.
Add information about syntax highlighting to README

Different CSS classes are used for code blocks depending on if the
content is generated from reStructuredText or Markdown. We need to add
some information to the README so the users know how to force the
correct class to be used when generating content from Markdown.
Update screenshot

The screenshot needs to be updated to reflect some of the recent changes
made to the template.