Why does this whitespace doesn't go even after adding margin-bottom:0?

Hi. This is my codepen. I am unable to remove the whitespace below navbar. If I remove the paragraph tag then the whitespace disappears. Please suggest some solution. Thank you!

I usually find including a CSS reset solves most spacing problems like that. This is the reset I use for most (if not all) my projects: https://meyerweb.com/eric/tools/css/reset/

Oh wow. This works great.Thank you! But why does it occur and why does margin-bottom :0 doesn’t help. Besides, why does it change the css designs which i have included. It has changed a bit more now though it removed the whitespace

A css reset just “overwrites” (not sure that’s the correct term) each browsers user agent style sheet, which applies default margins/paddings to each element, applies the default variable font sizes for h1, h2, h3 etc.

If you do some research on CSS resets, you’ll find a more in depth answer. But I think your margin 0 didn’t work, as it probably wasn’t specific enough to “overwrite” the user agent styles.

1 Like

Ok. Will have a look over it. Thank you. But I did apply margin:0 for correct class so I thought it should apply. Anyways will have a look. Thank you for the solution.