Learn Basic CSS by Building a Cafe Menu - Step 44

Hello. I need help with this step. It says I need to have five .flavor elements. I am trying to figure out what could be possibly wrong.
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">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>

<!-- User Editable Region -->

          <article class="item">
            <flavor="price"><p>Caramel Macchiato</p><p>3.75</p>
          </article>
          <article class="item">
            <flavor="price"><p>Pumpkin Spice</p><p>3.50</p>
          </article>
          <article class="item">
            <flavor="price"><p>Hazelnut</p><p>4.00</p>
          </article>
          <article class="item">
            <flavor="price"><p>Mocha</p><p>4.50</p>
          </article>

<!-- User Editable Region -->

        </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;
}

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

Your browser information:

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

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

Link to the challenge:

Hello!

You have all of the flavor as price, instead of the value of flavor. It should be as the one above .

Notice how you have it set up in the original one.

Hope this helps you, as you have shown your success with the previous code.
Wishing you much more success!

Happy coding! :slight_smile:

The challenge wants you to add the class “flavor” and “price” to the rest of the <p> elements.
The syntax for adding a class to an element is:

<p class="class_value">Text</p>

The <flavour=“price”> part should be removed.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.