Container

A simple container to center your content horizontally

The .hx-container class can used in any context.

This is how the container will behave:

on mobile and tablet, it will have a margin of 20px on both the left and right sides.
on desktop (>= 1000px), it will have a maximum width of 960px and will be horizontally centered.
on widescreen (>= 1192px), it will have a maximum width of 1152px.
on fullhd (>= 1384px), it will have a maximum width of 1344px.

The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.

If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the .is-fluid modifier: