CSS: “max-width”: “px” is not a “max-width” value.

A max-width declaration has the unit px with no number in front of it, so the browser can't read it as a length.

A CSS length is a number followed by a unit, written together: 600px, 40rem, 75ch. The unit alone means nothing. Browsers drop the invalid declaration, so the element falls back to max-width: none and can grow wider than you intended.

The cause is usually a template that prints a number variable right before a hard-coded px. When the variable is empty, the output is max-width: px;. Make sure the variable always holds a number, or leave the declaration out when there's no value. If you want no limit at all, use none.

The number and the unit can't be separated by a space either. max-width: 600 px; triggers a different validator error, "Too many values or values are not recognized".

Invalid example

<div style="max-width: px;">
  <p>This text block has no width limit.</p>
</div>

Valid example

<div style="max-width: 600px;">
  <p>This text block stops growing at 600 pixels.</p>
</div>

Learn more:

MDN Reference

MDN Web Docs: max-width

→

MDN Reference

MDN Web Docs: length

→