Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

Hello
Im stuck I cant see the problem really. maybe Im blind lol
instructions were

Step 52

Below the dessert you just added, add the rest of the desserts and prices using three more article elements, each with two nested p elements. Each element should have the correct dessert and price text, and all of them should have the correct classes.

below you can see my code so far . I got an error message
Your .dessert elements should have the text Donut , Cherry Pie , Cheesecake , and Cinnamon Roll .

I seriously though Ive done it right. Can someone please have a look ?
Many thanks

<!-- 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 class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>

<!-- User Editable Region -->

          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
        
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p> <p class="price">2.75</p>
            </article>
            <article class="item">
              <p class="dessert">Cheesecake</p> <p class="price">3.00</p>
            </article>
            <article class="item">
              <p class="dessert">Cinamon Roll</p> <p class="price">2.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, .dessert {
  text-align: left;
  width: 75%;
}

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

Your browser information:

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

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

Link to the challenge:

2

Not spelled correcty, and you need to get rid of the spaces that are between your dessert p elements and the price p elements

3

OMG thanks I havent seen it. I thought that fresh pair of eyes will catch it. Thank you very much

1 Like