The one-liner for max-width, centering, and margins.

To horizontally center an element and limit it’s width, this is easily the most common approach:

.page-wrap {
  max-width: 1000px;
  margin: 0 auto;
}Code language: CSS (css)

That could still touch the edges of a parent container though, so if need to enforce some spacing, we’d probably do that on a parent.

body {
  padding: 0 1rem;
}Code language: CSS (css)

There is no real problem with that, but we can smash it all into a one-liner now if you’re feeling it:

.page-wrap {
  margin-inline: max(1.5rem, ((100% - 500px) / 2));
}Code language: CSS (css)

The 1.5rem is the space on the outside (which could be 0), and the 500px is the max-width (or rather max-inline-size as we’re using logical properties here).