Sections always span 100% of the page width. However, you can control the layout within a section by using various HTML elements.
Shape the layout of your pages
Modify margins
You can add a left margin, making room for navigation. You also can center your content on the page by adding margins on the left and right.
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>Force spacing
Adjacent sections with different background colors will automatically create space for content. However, you can add various modifiers to a section to force spacing.
The options are: collapsed, extra-space, horizontal-rule, and force-padding. These modifiers always affect the bottom of the section they are added to.
Show/hide markup
<section class="section bg-none collapsed">
<div class="row">
<div class="layout">
<!-- Content goes here -->
</div>
</div>
</section>
<section class="section bg-none extra-space">
<div class="row">
<div class="layout">
<!-- Content goes here -->
</div>
</div>
</section>
<section class="section bg-none horizontal-rule">
<div class="row">
<div class="layout">
<!-- Content goes here -->
</div>
</div>
</section>
<section class="section bg-none force-padding">
<div class="row">
<div class="layout">
<!-- Content goes here -->
</div>
</div>
</section>