Learn Basic CSS by Building a Cafe Menu - Step 33

Tell us what’s happening:
Describe your issue in detail here.
I’ve looked at the other posts in relation to this step and haven’t been able to pass Step 33. This is the error message I keep getting: You should add the flavor class to your p element.
From my understanding, I have added the class to my p element and it is showing correctly on the previewer. I have refreshed, restarted and used a different browser. PLEASE HELP!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
          <article>
            <p><div class="flavor">French Vanilla</p>
            <p>3.00</p>
          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.34

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 33

Link to the challenge:

“Add the class name flavor to the French Vanilla p element.”

You added an opening div tag and added the flavor class to that. Instead you should add the flavor class to the p element. There is no need to add new elements here.

This is how I am understanding your comment, but it’s not correct.

French Vanilla div class=“flavor”


3.00

When I added the opening div tag it moved to the left in the preview (that’s what the task is wanting me to accomplish). Are there any other hints you can provide? I haven’t been this stuck before lol

The step doesn’t want you to accomplish this right at the moment. You will eventually accomplish this though. The only thing this step wants you to do is:

“Add the class name flavor to the French Vanilla p element.”

So you should not add anything else other than the flavor class to that p element.

I got it now! Thanks so much for your help! Had to move some things around!