2. Container

A container is an element that contains other elements to limit the width of the content. Basically we will have an element that wraps all the content of the page or a particular section.

Its advantages are related to adapting a design to different resolutions. We can achieve without much effort:

• Centering the content. This can be done with margin-inline: auto (or margin-left and margin-right with auto).
• Giving a maximum width to the design (1000px is recommended).
• Giving padding (space) around the content so that it does not stick to the edges on small screens.

Resize the following example to see how it adapts to the different screen sizes. It will take up 100% of the screen width on small screens and will lock at a fixed, centered size on large screens.

To create a container, the class name .container is usually used, and the following styles are added to it.

.container {
    margin-inline: auto;
    max-width: 1000px;
    padding: 1rem;
}

The element that uses the class must always wrap all the content of the page or section.

<main>
    <div class="container">
    <!-- All the page content goes here -->
    </div>
</main>

With the previous HTML we are centering the whole page, which is not a good idea when you want to use a background color that spans the entire screen width. The ideal is to create one container for each section of the page.

.container {
    margin-inline: auto;
    max-width: 1000px;
    padding: 1rem;
}

.hero {
    background: #A9B4C2;
}

.info {
    background: #488286;
}

<main>
    <section class="hero">
        <div class="container">
        <!-- All the section content goes here -->
    </div>
    </section>
    <section class="info">
        <div class="container">
        <!-- All the section content goes here -->
    </div>
    </section>
</main>

As you can see, the color of the sections spans the entire width while the content is centered. We did it!

We will have the good habit of creating containers for our sections and never for the whole page. And if we need a piece of content to take up the whole screen, we simply do not wrap it in a container.