Show/hide markup
<section class="section">

    <!-- div.row limits the max-width to 1020px -->
    <div class="row">

        <!-- div.layout adds left margin - making room for navigation -->
        <div class="layout">
            <!-- Content goes here -->
        </div>

    </div>

</section>

<!-- a wrapper with id="home" or class="wide" will force div.layout to 100% of div.row -->
<body id="home" class="wide">
    <section class="section">
        <div class="row">
            <div class="layout">
                <!-- Content goes here -->
            </div>
        </div>
    </section>
</body>

<!-- a wrapper of .no-section-nav will center div.layout with ~25% padding left and ~25% padding right -->
<main class="no-section-nav">
    <section class="section">
        <div class="row">
            <div class="layout">
                <!-- Content goes here -->
            </div>
        </div>
    </section>
</main>