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, ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access