A simple container to center your content horizontally
.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. Container Demo
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 Fluid container Demo