Main

A few notes on main, which contains the main contents of a web page.

There should only be a single instance of main that does not have the hidden attribute applied to it.
It is recommended to namespace the ID used on main for your project and remember to use it in the href for the skip to main content link. This helps to distinguish it from the main document inside any iframe. This site uses the ID #amplify-main.
In Amplify, main uses the same principles as the center layout helper to add some minimum space between its content and the edges of the parent element or viewport. Inspect this page in your web browser to see it in action.
Although it has a set maximum width, the utility class u-full-width can be applied to a child item of main to make it extend full width beyond the borders of main.

CSS custom properties