curriculum/challenges/english/blocks/workshop-tailwind-cta-component/6858ee73ed8106ccb214942a.md
Now that everything sticks to the left, you need to center the entire content by adding a margin of auto to the x-axis.
Add the Tailwind class that corresponds to that to the outer div element. To see that effect, adjust the preview tab until the entire content is centered.
Your outer div element should have the utility class mx-auto.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("mx-auto"));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CTA component</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
--fcc-editable-region--
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2">
<div>
<span>Soundflow</span>
<h1>Discover New Music</h1>
<p>Stream your favorite tracks and discover new artists.</p>
</div>
<div>
<a href="#">Learn more</a>
<a href="#">Start listening</a>
</div>
</div>
--fcc-editable-region--
</body>
</html>