Learn Basic CSS by Building a Cafe Menu - Step 45

I’m not sure what to do on this step, the instructions are

" To complete the styling, add the applicable class names flavor and price to all the remaining p elements."

The hint given is “You should have five .flavor elements.”

Im just confused on what needs to be changed to be able to advance, thank you!

  **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 class="item">
          <p class="flavor">French Vanilla</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p item="flavor">Caramel Macchiato</p><p item="price">3.75</p>
        </article>
        <article class="item">
          <p item="flavor">Pumpkin Spice</p><p item="price">3.50</p>
        </article>
        <article class="item">
          <p item="flavor">Hazelnut</p><p item="price">4.00</p>
        </article>
        <article class="item">
          <p item="flavor">Mocha</p><p item="price">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;
}

.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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

The first article is what you did in the previous step, so you know it is correct. You added the flavor class to the first p element and the price class to the second p element. The instructions are asking you to do the same thing for the other articles. Your second article is adding the item attribute instead of the class attribute to the p elements.

I did not realize that lmao, thank you so much!

Hey, just curious, because I am always looking for ways to make the instructions clearer. What exactly did you think the instructions were saying? What would have made it clearer for you?

It wasn’t the instructions, now that I look back they are clear, I just saw the word item and got myself confused between item and class

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