Learn Basic CSS by Building a Cafe Menu - Step 52 Stuck with Hint : You should not have any spaces between your p elements

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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">Cheesecake</p><p class="price">3.00</p>
        </article>
        <article class="item"><p class="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%
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/109.0

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

Link to the challenge:

2

Hello,
Welcome to the Forums :wave:

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like
3

well I was just checking out on the new Course (New) Responsive Web Design and I kinda got stuck on this Step 52 when the Message of Test says :

Sorry, your code does not pass. Try again.

and the Hint says :

You should not have any spaces between your p elements.

And if I’m not mistaken I did check the Code really carefully and I’m pretty sure that there is no spaces between the p tags on my code.
And Thanks in Advance.

4

Shot in the dark. But are the prices in the correct order?
I can’t see which prices are for which item but I see yours are listed as
3.00 3.75 3.50

1 Like
5

Problem Solved.

Thanks for reminding me of those others on top they were the issue in this code.
The fact that those ones on top weren’t structured like the others on bottom,
To be honest I did correct them on the last lesson but when i got Advanced to the next lesson they got restructured like that. and made some spaces between p elements.

1 Like
6

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