09. Containers

It is very common in HTML to place an element such as a <div> around over content to act as a container. These containers help in organizing the layout, styling, and structure of a webpage. The most commonly used container element is the <div> element, which is a generic block-level container.

This could be done with either <div id="container">:

<div id="container">
  <!-- Content goes here -->
</div>

#container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

... or <div class="container">:

<div class="container">
 <!-- Content goes here -->
</div>

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

• If you use id="container", you should not use the same ID elsewhere in the HTML. This container is considered unique.
• If you use class="container", you can apply this class to multiple container elements, allowing for consistent styling across different parts of your page.

Given the risk of id not been unique, in most instances .container is the better option.

Centering with margin:auto

These properties will set the container’s width to 900 pixels. By setting the margin to auto this will tell the browser to allocate margin equally to both the left and right sides.