Ignition comes with three container classes. They are meant to hold actual content, from images, to articles to menus. All three containers have padding on both the left and right. This way no content is up against the edge of the browser. 

The padding for all of them is 30px on left and right. This can be changed in the variables.scss file.


Container creates a centered container with a max-width of 1200px. It is your main class for holding your site content. On very wide screens this is set to a max-width of 1400px.


This container is the same as the one above, except it has a width of 100%. It is basically used for adding the padding without any width constriction.


This special container has padding but NO width set on it at all. Instead a max-width of 730px is set on ALL its direct children. These children are also centered. The max-width can be changed in variables.scss.

This container is for all your actual main content, like articles and posts. This makes sure your content is narrow enough for good readability, so a reader can read one line and their eyes can move down to the next line without skipping any lines or re-reading the same one again.

According to web design standards, it’s usually good to have around 70 to 80 characters on one line of reading. This number changes based on how large your text is. But 730px seems like a good size for reading. 

The reason the max-width was not placed directly on the container is because sometimes you will want a full section within your article where you break out of that max-width restraint. If the container-content had a max-width, the children would not be able to suddenly go 100% when needed (not without css trickery, but even then, it wont work if there is a sidebar).

By putting the max-width on direct children we can make exceptions where a child element has a full width.

Those exceptions are:

A direct child element with class alignwide.
A direct child element with class alignfull.

Alignwide / Alignfull

These classes are an exception when found on an element within a container-content.
They will make an element stick out of the max-width of 730px. Alignwide will stick out just a bit, while alignfull will give you back the full real-estate of your sites width. Both classes can be used at any time and are used by WordPress blocks in Gutenberg.