Learn Basic CSS by Building a Cafe Menu - Step 42

Tell us what’s happening:
Hi guys, i need to add a class item to the article elements to match my first set. I am stuck, my initial thought was that i needed to create a class attribute for each p element like;

Mocha

But no it did not work, Then i thought to create a class attribute with the value price for each price but still did not work. where did I go 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>
          <article>
            <p class="flavor">Caramel Macchiato</p>
            <p class="price">3.75</p>
          </article>
          <article>
            <p class="flavor">Pumpkin Spice</p>
            <p class="price">3.50</p>
          </article>
          <article>
            <p class="flavor">Hazelnut</p>
            <p class="price">4.00</p>
          </article>
          <article>
            <p class="flavor">Mocha</p>
            <p class="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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

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

Link to the challenge:

Welcome to our community!
All ‘article’ elements should have the same class of “item”.

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