A container makes elements within the page appear neater on desktop, and ensures they function well on mobile. It also makes sure that they don't overlap fixed elements such as the navbar.
For example, the following box is inside a container:
I'm in a container!
However, the following box is not in a container, therefore it's margins are incorrect:
I'm not in a container!
Of course, some elements don't look correct inside containers - navbars, footers, etc... When an element is not intended to be placed inside a container, this is marked in its documentation.
To make a container in Magic, place your elements inside a <div class="container">:
<div class="container">
...
</div>Simple! Containers can be nested, although it is difficult to think of any scenarios where this would be necessary.