# CSS: “justify-content”: X is not a “justify-content” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-justify-content-x-is-not-a-justify-content-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The validator reports a `justify-content` value that isn't one of the property's keywords, most often a misspelling such as `flext-start` for `flex-start`.

`justify-content` distributes free space along the main axis of a flex container, or the inline axis of a grid container. The validator accepts `normal`, `flex-start`, `flex-end`, `start`, `end`, `center`, `left`, `right`, `stretch`, `space-between`, `space-around` and `space-evenly`. A position keyword can take a `safe` or `unsafe` prefix, as in `safe center`. Keywords ignore case, so `Flex-Start` passes, but `flex_start` with an underscore doesn't.

Some wrong values belong to other properties. `baseline` and `self-start` work on `align-items` and `justify-self`, not on `justify-content`. `middle` comes from `vertical-align`; box alignment spells it `center`.

Browsers drop a declaration with an unknown value, and the container keeps whatever `justify-content` an earlier rule gave it, or the initial `normal`. In a flex container, `normal` packs the items at the start of the line, just like `flex-start`. A misspelled `flex-start` therefore often looks right in the browser. The typo only shows when the declaration was meant to override another one, as in a media query that changes the layout on small screens.

## Invalid example

```html
<style>
  .toolbar {
    display: flex;
    justify-content: space-between;
  }

  @media (max-width: 600px) {
    .toolbar {
      justify-content: flext-start;
    }
  }
</style>
```

## Valid example

```html
<style>
  .toolbar {
    display: flex;
    justify-content: space-between;
  }

  @media (max-width: 600px) {
    .toolbar {
      justify-content: flex-start;
    }
  }
</style>
```