CSS: “margin-X”: Y is not a “margin-X” value.

The value given to a single-side margin property such as margin-left or margin-right does not match the syntax CSS allows for it, so browsers ignore the whole declaration.

Each side property (margin-top, margin-right, margin-bottom and margin-left) takes one value: a length like 10px or -1.5rem, a percentage like 5%, the keyword auto, or a global keyword such as inherit. Negative lengths are allowed, so -21px on its own is fine.

A common cause is wrapping the value in quotes, as in margin-left: '-21px'. Quotes turn the value into a CSS string, and no margin property accepts a string. This tends to happen when the style is built by code that quotes values the way JavaScript does (element.style.marginLeft = '-21px'). Putting !important inside the quotes makes it part of the string as well, so the priority flag is lost along with the value.

A keyword the property doesn't support, like margin-right: none, triggers the same message.

Invalid example

<div style="margin-left: '-21px !important'; margin-right: '-21px !important';">
  Wide banner
</div>

Valid example

Remove the quotes and keep !important after the value:

<div style="margin-left: -21px !important; margin-right: -21px !important;">
  Wide banner
</div>

Learn more:

MDN Reference

CSS margin-left property

→

MDN Reference

CSS margin-right property

→

MDN Reference

CSS margin property

→