Problem with my Visual studio Code live server

Guys, I have copied the exact same project (Camper cafe) code from freecodecamp and tried to run the code from my Visual Studio Code live server. But the web page is not complete, the alignments of the words are messed up. Please help me solve this issue


Here is the reference. But both the HTML and CSS codes are exactly the same as in the website. I also tried running the live server in chrome, but same issues continues.

please provide the code

I am sorry, I can’t able to share the entire code here its giving me some error. To get the code which I am referring to, please go to the Responsive Web design certification → Learn Basic CSS by building a Cafe Menu → step 91. There you will have the code.

That will not provide us your code. Maybe create and share a public GitHub repository if you cannot provide it in your post?

https://github.com/vijay17-vj/Camper-Cafe.git

It’s because the paragraph elements are on new lines. If I change the HTML to this (removing the new line for the first row):

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

Then that line gets fixed:

Screenshot 2024-05-31 12.30.10 PM

I’m not exactly sure why that is though, I am guessing that somehow because they are inline-block elements that the white-space is preserved? I don’t fully understand how that works.

1 Like

Thank you soo much man!!! It works😍.

1 Like