Design a Cafe Menu - Step 48

Curriculum Help
1

Tell us what’s happening:

Step 48:

  • System keep reply with “you should not have any spaces between p elements” although there are no spaces.
  • No spaces between class equal sign and calss name,
    Please advice.

NB:
code:

Donut

1.50

Cherry Pie

2.75

Cheesecake

3.00

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>
        <article class="item">
          <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
<!-- User Editable Region -->
        <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>
<!-- 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/152.0.0.0 Safari/537.36

Challenge Information:

Design a Cafe Menu - Step 48

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-cafe-menu/5f716bee5838c354c728a7c5.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @Addel,

Please reset this step since you have changed the spacing between the p elements on all of the coffee items, which will cause the tests to fail.

Try again, being careful to only add the items asked in the instructions without changing any of the starting code.

Happy coding

3

dhess,

Thank you for your reply, But still same result.

4

Please post your updated code formatted as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

5 
 <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>
6

Please post ALL of your code.

7

dhess,

Thanks for your help, solved

regards,

Addel