# CSS: “width”: Too many values or values are not recognized.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-width-too-many-values-or-values-are-not-recognized
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The CSS `width` property sets an element's width and accepts a single value. The W3C validator reports this error when it encounters something it cannot parse as a valid `width` declaration. Common causes include:

- **Missing units**: Writing `width: 300` instead of `width: 300px`. CSS requires explicit units for non-zero lengths.
- **Multiple values**: Writing `width: 100px 200px` as if `width` accepted shorthand-style multiple values (it doesn't).
- **Typos or invalid keywords**: Writing `width: auot` instead of `width: auto`, or using a made-up keyword.
- **Invalid functions or syntax**: Using incorrect function syntax like `width: calc(100% - 20px)` with missing spaces around operators, or using browser-prefixed values without a standard fallback.
- **Unsupported values**: Using newer CSS values like `fit-content` or `max-content` in a context where the validator's CSS level doesn't recognize them.

This matters because invalid CSS can cause browsers to silently discard the entire declaration, meaning your intended layout won't be applied. Different browsers may handle invalid values differently, leading to inconsistent rendering. Keeping your CSS valid ensures predictable, cross-browser behavior.

### Valid values for `width`

The `width` property accepts exactly one of the following:

- **Length values**: A number with a unit, such as `300px`, `25em`, `10rem`, `5vw`.
- **Percentage values**: A percentage relative to the containing block, such as `75%`.
- **Keyword values**: `auto`, `max-content`, `min-content`, `fit-content`.
- **Function values**: `fit-content(20em)`, `calc(100% - 40px)`, `min(300px, 100%)`, `max(200px, 50%)`, `clamp(200px, 50%, 600px)`.
- **Global values**: `inherit`, `initial`, `revert`, `revert-layer`, `unset`.

Note that `0` is the only numeric value that does not require a unit.

## Examples

### Incorrect: missing unit

```html
<style>
  .box {
    width: 300;
  }
</style>
<div class="box">Content</div>
```

A bare number (other than `0`) is not valid. The browser won't know if you mean pixels, ems, or something else.

### Correct: unit provided

```html
<style>
  .box {
    width: 300px;
  }
</style>
<div class="box">Content</div>
```

### Incorrect: too many values

```html
<style>
  .sidebar {
    width: 200px 400px;
  }
</style>
<aside class="sidebar">Sidebar</aside>
```

Unlike properties such as `margin` or `padding`, `width` only accepts a single value.

### Correct: single value

```html
<style>
  .sidebar {
    width: 200px;
  }
</style>
<aside class="sidebar">Sidebar</aside>
```

### Incorrect: typo in keyword

```html
<style>
  .container {
    width: auot;
  }
</style>
<div class="container">Content</div>
```

### Correct: proper keyword

```html
<style>
  .container {
    width: auto;
  }
</style>
<div class="container">Content</div>
```

### Incorrect: malformed `calc()` expression

```html
<style>
  .panel {
    width: calc(100%-40px);
  }
</style>
<div class="panel">Content</div>
```

The `calc()` function requires spaces around `+` and `-` operators.

### Correct: properly spaced `calc()` expression

```html
<style>
  .panel {
    width: calc(100% - 40px);
  }
</style>
<div class="panel">Content</div>
```

### Incorrect: accidental semicolon or extra text

```html
<style>
  .card {
    width: 50% important;
  }
</style>
<div class="card">Content</div>
```

If you intended to use `!important`, the `!` is required.

### Correct: proper `!important` syntax

```html
<style>
  .card {
    width: 50% !important;
  }
</style>
<div class="card">Content</div>
```