A layout can look good on a phone yet stretch too far across a wide monitor. The CSS `max-width` property puts an upper limit on an element’s width: the element can be narrower, but it will not grow beyond the specified maximum. section 4.5.3
Keep a profile card flexible
Set `.card { width: 75vw; max-width: 500px; }`. The card aims to use 75% of the viewport width, so it shrinks on narrow screens. On larger screens, `max-width` keeps it from becoming wider than 500px. section 6.4
Constrain and center a page
Set `main { max-width: 1280px; margin: 0 auto; }` for a checkout page. The width stops increasing at 1280px, while the automatic left and right margins center it when extra space is available. section 8.5
If the page background should still fill an extra-wide window, set its color on `html`, not only on the width-constrained page container. Otherwise, bands can appear beside the centered content. section 4.5.3
Do not confuse the property with `@media (max-width: 549px)`. That media query applies CSS rules only at viewport widths of 549px or less; a `max-width` declaration limits the width of an element. section 8.3.1 section 6.4
