---
id: 6864dafe72087c517e80f6e0
title: Step 9
challengeType: 0
dashedName: step-9
---

# --description--

The `h1` text is too close to the top of the page and the text below it, so you should add some spacing around it.

In addition to the existing ones, assign the utility classes `mt-8` and `mb-12` to the `h1`.

# --hints--

Your `h1` element should have the class `mt-8`.

```js
const h1El = document.querySelector("h1")

assert.isTrue(h1El.classList.contains("mt-8"))
```

Your `h1` element should have the class `mb-12`.

```js
const h1El = document.querySelector("h1")

assert.isTrue(h1El.classList.contains("mb-12"))
```

# --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>Music App Pricing</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100">
    <main>
--fcc-editable-region--
      <h1 class="text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
--fcc-editable-region--
      <div>
        <div>
          <div>
            <h2>Listener</h2>
            <p>$0<span>/month</span></p>
            <p>
              Start exploring millions of songs with basic features and ads.
            </p>
            <ul>
              <li><span>&#10003;</span>Ad-supported streaming</li>
              <li><span>&#10003;</span>Curated playlists</li>
            </ul>
          </div>
          <a href="#">Start listening</a>
        </div>
        <div>
          <div>Most Popular</div>
          <div>
            <h2>Premium</h2>
            <p>$9.99<span>/month</span></p>
            <p>
              Enjoy the full music experience with unlimited access and
              downloads.
            </p>
            <ul>
              <li><span>&#10003;</span>Ad-free listening</li>
              <li><span>&#10003;</span>Offline playback</li>
              <li><span>&#10003;</span>Unlimited skips</li>
            </ul>
          </div>
          <a href="#">Go Premium</a>
        </div>
        <div>
          <div>
            <h2>Family</h2>
            <p>$14.99<span>/month</span></p>
            <p>
              Enjoy all of the features with a plan for up to 6 family members.
            </p>
            <ul>
              <li>
                <span>&#10003;</span>All Premium features
              </li>
              <li>
                <span>&#10003;</span>Up to 6 accounts
              </li>
              <li>
                <span>&#10003;</span>Individual playlists &
                libraries
              </li>
              <li>
                <span>&#10003;</span>Family Mix playlists
              </li>
            </ul>
          </div>
          <a href="#">Start Family Plan</a>
        </div>
      </div>
    </main>
  </body>
</html>
```
