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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-max-width-none-20px-is-not-a-max-width-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `max-width` declaration subtracts a length from the `none` keyword, and a keyword can't take part in arithmetic.

`none` means the element has no maximum width, which leaves nothing to subtract 20 pixels from. CSS identifiers can contain hyphens and digits, so the browser reads `none-20px` as one unknown keyword and drops the declaration. The element then takes its `max-width` from an earlier rule, or has no limit at all. Adding spaces doesn't help: `none - 20px` is a parse error, and `calc(none - 20px)` fails too, because `calc()` only works with numeric values such as lengths and percentages.

A value like this is usually the output of a preprocessor. In Sass, `$max-width - 20px` compiles to `none-20px` when `$max-width` is `none`. To Sass, `none` is a string, and its `-` operator joins a string and another value with a hyphen instead of subtracting.

Work out which width you meant. To keep the element 20 pixels narrower than its container, use `calc(100% - 20px)`. If you didn't want a limit, write `none` on its own. In a Sass mixin or function, only subtract from the variable when it holds a length, and output `none` unchanged otherwise.

## Invalid example

```html
<div style="max-width: none-20px;">
  <p>This panel was meant to stay 20 pixels narrower than its container.</p>
</div>
```

## Valid example

```html
<div style="max-width: calc(100% - 20px);">
  <p>This panel stays 20 pixels narrower than its container.</p>
</div>
```