Learn Basic CSS by Building a Cafe Menu - Step 41 - F7fHznygH-FbgtG5GPLRm

Tell us what’s happening:
Describe your issue in detail here.
hello,I got this hint, I cannot understand, how to let two ‘p’ elements have not any space between them?

Hint

Your p elements should not have any space between them.

  **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">
    <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>Caramel Macchiato</p>
         <p class="price">3.75</p>
        </article>
        <article class="item">
          <p>Pumpkin Spice</p>
         <p class="price">3.50</p>
        </article>
        <article class="item">
          <p>Hazelnut</p>
         <p class="price">4.00</p>
        </article>
        <article class="item">
         <p>Mocha</p>
          <p class="price">4.50</p>
        </article>
      </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 {
text-align: left;
width: 49%;


}

.price {
text-align: right;
width: 49%;

}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

Instructions: “simply move the price p element to be on the same line and make sure there is no space between them.”

The price still appears to be on a separate line below the “French Vanilla” element.

Use your back space key to delete the spaces before the price element until it is on the same line as the “French Vanilla” element. In other words, the </p> of the “French Vanilla” element and the <p> of the price element should be touching.

Thanks a lot , I tried to do it and it passed. :+1: