Search code examples
cssmedia-queries

CSS @media - Stop stretching content after exceeding max-width

Currently I have @media only screen and (max-width: 1231px), but when my screen width exceeds 1231px, everything looks messed up.

Instead, after the screen width exceeds 1231px, I want to keep the body centered horizontally, and append whitespace on the left and right of the body. How do I do that?

Solution

  • You could use a div container and put all your content inside:

    .container {
  max-width: 1231px;
  margin: 0 auto;
}