The container mixin

Next, let's replace our container with Susy's container mixin. The container mixin sets the max-width of the containing element, which right now is our .container element. However, later in this chapter we will use this to semantically restrict certain parts of the design to our maximum width.

The container element takes a width argument, which will be the max-width. It also automatically applies the micro clearfix hack. This prevents the containers height from collapsing when the elements inside it are floated. I prefer the overflow: hidden method myself, but they do the same thing essentially.

By default, the container will be set to max-width: 100%. However, you can set it to be any valid unit of dimension, such as 60em, 1160px, 50%, 90vw, or whatever. As long as it's a valid CSS unit it will work.

So let's replace our current properties in the .container  rule in scss/layout/_grid.scss with the container mixin:

.container { 
    @include container(1160px); 
...