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

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

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

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

Valid example

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

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

Learn more:

MDN Reference

justify-content - MDN Web Docs

→

MDN Reference

CSS box alignment - MDN Web Docs

→