Hello, I'm Kevin Zöller and I have a problem with this challenge

[Challenge link ] (Https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-53)

I have removed all the spaces between the

elements and still get the following error.

This is the error---------------------------------------------------------------------------------------------

## Test

Sorry, your code does not pass. Hang in there.

## Hint

You should not have any spaces between your p elements.

this is the code block---------------------------------------------------------------------------------------

<article class="item">

              <p class="dessert">Donut</p><p class="price">1.50</p>

              <p class="dessert">Cherry Pie</p><p class="price">2.75</p>

              <p class="dessert">Cheesecake</p><p class="price">3.00</p>

              <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>     

            </article>

this is the this is the complete code---------------------------------------------------------------------

—index.html-------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

  <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" type="text/css" />

  </head>

  <body>

    <div class="menu">

      <header>

        <h1>CAMPER CAFE</h1>

        <p>Est. 2020</p>

      </header>

      <main>

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

              <p class="dessert">Cherry Pie</p><p class="price">2.75</p>

              <p class="dessert">Cheesecake</p><p class="price">3.00</p>

              <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>     

            </article>

        </section>

      </main>

    </div>

  </body>

</html>

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%

}

As the hint says, you shouldn’t have any whitespace between the different <p> elements. The reason for this is due to the fact that the items class is set to display: inline-block; which will render whitespace as extra space between elements.

first, thanks for your answer! and second… The

elements don’t have spaces between them.

It looks like there’s a couple newlines worth of whitespace between each of these.

It’s the space when you paste the code here, but in the editor, each line is below another and it’s spaces.

Still that’s a newlines worth of space. Because of rendering the lesson wants them back to back:

<p>content</p><p>content</p><p>content</p>

Here’s an article that shows several different formatting tricks you can use:

1 Like

Hi @Kevin_Zoller ,

You are adding all the desserts in one single article element. But you are supposed to :

Add the rest of the desserts and prices using three more article elements, each with two nested p elements.

Just like you did for the flavors :

3 Likes