Container

A easy way to add paddings around content and make content aligned in the horizontal center.

Introduction

The container is just a <div> has surrounding paddings and a max width limit. It will be positioned in the horizontal center when available horizontal space is larger than the max width limit.

<div class="container bc-primary">
  <p class="bc-dark c-light ta-center">A paragraph wrapped in a container.</p>
</div>

Sass Variables

$container-max-width-rem: 105.076923rem !default

$container-padding-rem: $spacing-medium-rem $spacing-small-rem !default