Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Plz, I need help.
Am I supposed to add four .dessert elements?
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>
            <p class="dessert">Cherry Pie</p>
            <p class="price">2.75</p>
          </article>
          <article>
            <p class="dessert">Cheesecake</p>
            <p class="price">3.00</p>
          </article>
          <article>
            <pclass="dessert">Cinnamon 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%
}
.dessert, .donut, .cherry pie, .chessecake, .cinammon roll {
  text-align: left;
}

Your browser information:

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

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

Link to the challenge:

2

The test wants you to have the paragraph elements side by side, like they are in the code above. You just have to remove the spacing in between the paragraphs so that they are together like so:

<article class="item">
  <p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article>
  <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article>
  <p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article>
  <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
3

Is this all they want me to do?
So that means that I should delete what I added to css.

4

Thanks, but it asks for four .dessert elements.

5

There are four dessert elements. The dessert class is in the first p paragraph. Your solution is also correct and works, but it doesn’t pass the test because of the spacing between paragraphs. The test for this is just specific on the spacing between paragraph elements.