#Level

The level class is a type of layout that usese flexbox with justify-content: center.

The children of the level class are called level-item. Each level-item can have the level-content class to allow for flex grow to stretch the div.

.level-item
padding: 1rem

.level-item
padding: 1.5rem 1rem

.level-item
padding: 1rem

Above is an example that uses the level class as the container and then the level-item class to space out the children and keep the left and right divs in the center (vertically speaking) to the parent div.

Center

You can also create your very own navbar with the level class. This differs from the header class in the sense that divs have more padding with the same color along with a slight adjustment to the divs.

.level-item
.level-content

.level-content
.level-item

.level-item
.level-content

Tl;dr: For navbars, check out the header menu documentation.
Fill Height

Looking at the previous examples, you may be wondering how to force the level-items to fill the height of its parent container. This is easily done by adding the fill-height class to the level div.

Totally

Equal

Equal

Equal

Heights