Responsive Container

A centred, width-limited wrapper with side gutters in two lines of CSS — no media queries needed.

container.css

.container {
  /* Change these two numbers per project */
  --container-max: 70rem;
  --container-gutter: 1rem;

  width: min(100% - 2 * var(--container-gutter), var(--container-max));
  margin-inline: auto;
}

/* Optional: a narrower variant for long-form text */
.container--narrow {
  --container-max: 42rem;
}

Almost every page needs the same thing: content that sits in the middle, never gets wider than a comfortable reading width, and never touches the screen edges on a phone. The classic answer was max-width + padding + a media query. min() does it in one declaration.

Line by line

--container-max and --container-gutter are custom properties (CSS variables), so you can tweak the container per page or per variant without repeating the formula.
min(A, B) takes whichever value is smaller right now. On a phone, 100% - 2rem is smaller, so the box fills the screen minus a 1rem gutter on each side. On a wide screen, 70rem is smaller, so the box stops growing.
Inside min() you can do maths directly (100% - 2 * var(...)) — no calc() needed.
margin-inline: auto splits the leftover space equally on the left and right, which centres the box. It's the logical-property version of margin-left: auto; margin-right: auto and also works for right-to-left languages.

The older pattern

CSS

.container {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1rem;
}

With min()

CSS

.container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

Both work. The min() version keeps padding free for your own use (backgrounds, borders) because the gutter lives in the width.

Want to see the box model behind this? Try The Web track, or open the Playground and resize the preview with the Phone / Tablet buttons.

Usage

HTML

<main class="container">
  <h1>My page</h1>
  <p>Content stays centred with a gutter on small screens.</p>
</main>

<article class="container container--narrow">
  <p>Long text reads better at around 60–75 characters per line.</p>
</article>