# CSS: “align-items”: “left” is not a “align-items” value.

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

`left` is not a valid value for the `align-items` CSS property.

The `align-items` property controls how flex or grid items are aligned along the cross axis of their container. Its valid values include `stretch`, `flex-start`, `flex-end`, `center`, `baseline`, `start`, `end`, `self-start`, and `self-end`.

The value `left` is not recognized because `align-items` works on the cross axis (typically vertical), not the inline/horizontal axis. If you want to align items to the start, use `flex-start` or `start` instead.

If you're actually trying to align content horizontally to the left, you likely want the `justify-content` property (which controls the main axis) or `text-align: left` on the container.

## How to Fix

**Incorrect:**

```html
<div style="display: flex; align-items: left;">
  <p>Hello</p>
</div>
```

**Fixed — aligning items to the start of the cross axis:**

```html
<div style="display: flex; align-items: flex-start;">
  <p>Hello</p>
</div>
```

**Fixed — aligning items horizontally to the left (main axis):**

```html
<div style="display: flex; justify-content: flex-start;">
  <p>Hello</p>
</div>
```