Learn Basic CSS by Building a Cafe Menu - Step 52

Tell us what’s happening:
Not sure what i’m doing wrong here, but i don’t understand the error message.
Your .dessert elements should have the text Donut , Cherry Pie , Cheesecake , and Cinnamon Roll .

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 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">Cheese Cake</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 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

Try removing the class attribute in the three new articles
since they weren’t requested , be careful when coping .

I don’t think you need to remove any class elements. The instructions ask you to add them.

You have a few typos in the spelling of the desserts. Look at Cheesecake and Cinnamon Roll.

After you fix those you will get another error. You can solve that by putting the two p elements on the same line, just like you did for Donut and 1.50.

I had my problem solved with the syntax error. Mistyped Cheesecake

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