You should not have any spaces between your p elements

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
You should not have any spaces between your p elements.

   **Your code so far**

\ file: <!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="flavor2">Caramel Macchiato</p>
           <p class="price2">3.75</p>
         </article>
         <article class="item">
           <p class="flavor2">Pumpkin Spice</p>
           <p class="price2">3.50</p>
         </article>
         <article class="item">
           <p class="flavor2">Hazelnut</p>
           <p class="price2" >4.00</p>
         </article>
         <article class="item">
           <p class="flavor2">Mocha</p>
           <p class="price2">4.50</p>
         </article>
       </section>
     </main>
   </div>
 </body>
<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="flavor2">Caramel Macchiato</p>
           <p class="price2">3.75</p>
         </article>
         <article class="item">
           <p class="flavor2">Pumpkin Spice</p>
           <p class="price2">3.50</p>
         </article>
         <article class="item">
           <p class="flavor2">Hazelnut</p>
           <p class="price2" >4.00</p>
         </article>
         <article class="item">
           <p class="flavor2">Mocha</p>
           <p class="price2">4.50</p>
         </article>
       </section>
     </main>
   </div>
 </body>
<html>

\ file: 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: 50%;
}

.price {
 text-align: right;
 width: 50%;
}
.flavor2{
 text-align: left;
width:49%;

}
.price2{
 text-align:right ;
 width:50%;
}

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: 50%;
}

.price {
 text-align: right;
 width: 50%;
}
.flavor2{
 text-align: left;
width:49%;

}
.price2{
 text-align:right ;
 width:50%;
}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Challenge: Step 44

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

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

Also, the more information you give us, the more likely we are to be able to help.

3

Right now your p elements and its price are in different lines, except for the French Vanilla. You have to make the other p elements in a similar way such that the flavour and price classes are in the same line.

1 Like
4

I still can’t solve that problem, I’ve done the same thing as before, by adding the same class element to every p and its articles

5

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

6

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