---
id: 684d105e488dbd1166a717ae
title: Step 16
challengeType: 0
dashedName: step-16
---

# --description--

If you increase the size of the preview window, you will notice that all of the items are still left-aligned in the container. It would be nice if the flex items were centered. 

To position flex items along a container's main axis with Tailwind CSS, you can use the following pattern: `justify-value`. `value` can be `start`, `end`, `center`, `between` and more. Any valid value used in vanilla CSS with `justify-content` can be used here with Tailwind CSS. 

Inside your opening `div` tag, use the correct utility class for setting the `justify-content` property to `center`.

# --hints--

Your opening `div` tag should have the `justify-center` utility class.

```js
const divEl = document.querySelector("div");
assert.isTrue(divEl.classList.contains("justify-center"));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error Message Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>  
    --fcc-editable-region--
    <div class="bg-red-100 border-2 border-red-300 rounded-md md:w-1/2 p-4 mt-4 md:mx-auto flex gap-4">
    --fcc-editable-region--
      <p>
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      <button aria-label="Dismiss">
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>
```
