Beginner HTML/CSS Mistake

Question

I'm taking a beginning web design class on Treehouse, and I have a question about centering a class in HTML with CSS, It's not coming out right, even though I have checked instructions. Can someone please look at this code and tell me what I've done wrong?

Here's the HTML:

<main class="flex">
  <div class="card">
    <h2>class="card-title">Background</h2>

And, Here's the CSS:

.card-title {
   text-align:center;
}

The output is like this: "class="card-title">Background"

---

I'm sure the answer is something super simple, because this is a simple course. But I'm just learning, and I'm rather nervous, so any help you can provide will be awesome!

Answer 1

You are closing the h2 too early. Also note that when you set a parent element to display: flex - all its children are affected - you may need to set a flex value on the h2 - or rethink the use of flex (thats is assuming your class of flex is to set the display:flex on the main element and its childrent - cards). If its as simple as centering the text, you won't need to use flex. And I am assuming that you are closing the <main> and the div.card as well..

It should be

<h2 class="card-title">Background</h2>

Answer 2

The mistake is here

<h2>class="card-title">Background</h2>

should be

<h2 class="card-title">Background</h2>