The CSS max-width property sets the largest width an element may use. On a page container, it keeps text lines from becoming too long; 800px is a practical starting point for many pages. section 3.2.8 section 5.2.3
To change a page’s limit, replace the number but keep the unit. Try widths from about 600px to 1,000px, then adjust for your font size: larger text may need more width, while smaller text may suit less. section 4.4
Limit and center a page
This body rule caps the page at 800px. The margin value centers it when the browser window is wider than that limit; padding adds space around the content. section 6.4
body {
background-color: oldlace;
max-width: 800px;
margin: 0 auto;
padding: 25px;
line-height: 1.5;
}
Use this complete body rule as a small, editable starting point. Change only the 800px value to test a different page width. section 6.4
Do not confuse a max-width declaration with max-width in a media query. The property limits an element’s width; a media query checks whether the screen is at or below a chosen width before applying its rules. section 12.2.9
Small-screen layout rule
For example, @media (max-width: 500px) can switch a main element to a one-column grid when the screen is 500px wide or narrower. section 12.2.9
