Learn Basic CSS by Building a Cafe Menu - Step 44

Tell us what’s happening:
“To complete the styling, add the applicable class names flavor and price to all the remaining p elements.”
I don’t understand this instruction

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">
            <p>Caramel Macchiato</p><p>3.75</p>
          </article>
          <article class="item">
            <p>Pumpkin Spice</p><p>3.50</p>
          </article>
          <article class="item">
            <p>Hazelnut</p><p>4.00</p>
          </article>
          <article class="item">
            <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 (iPhone; CPU iPhone OS 16_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/93.0.4577.78 Mobile/15E148 Safari/604.1

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

Link to the challenge:

Hello!
It is telling you to copy the same class into the remaining p elements where they go.
Use the quoted one for reference where they should be located in the other coffee items on the menu. Hope this helps

hi there, like adnan04 said: ( in other words):
to align the other coffee-flavours and prices in same kind as your " French Vanilla"
the class attributes " flavor"and “price” should be added to their paragraphs.
That will align the prices to the right, since your css-sheet got a class that does so.

Please dont use another users topic for help with your own code.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

The page is not used well yet. I did not realize. thank you

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