Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

Tell us what’s happening:

I get a space warning even though there is no space between p’s

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>

<!-- User Editable Region -->

        <h2>Desserts</h2>
<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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 52

2

Your solution works on my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

3

the coffees have been changed, it looks like these are making the tests fail

4

You mean the new line between the p elements could be breaking the tests? Is there something else there I’m not seeing?

EDIT: Never mind. Just tested the full code and got the message that there should be no spaces between paragraphs. Good catch!!

5

yes, it could be, the seed code for the step doesn’t have any characters between the two p elements in each article in the coffees section

6

And Step 42 shows exactly why the p elements should be placed on the same line with no spacing between them. It borks the menu presentation when there is. In fact, there are several steps leading up to this that talk about this. Swear I pick up something new every time I look through these projects!