Need help (html css )navigation bar

hi guys. can anyone help me?

I want to remove space from this navigation menu
I tried all the things but don’t know what’s wrong


I assume you’re using Firefox, right? I’ve been having troubles with it lately in regards to the whitespace.

TL;DR; The fix is to add this to the CSS:

ul {
  white-space: no-wrap;

/* or, if you want to target only the list on the navbar */
#navbar ul {
  white-space: no-wrap;

Your code is fine on Opera and Chrome (WebKit based browsers), but Firefox is taking into account every whitespace as something that has to use space.

If you inspect your page using the HTML Inspector (Control + Shift + i then click on the Inspector tab on Firefox), you will see that there is an element called whitespace between your li elements:

Another thing… when you use codepen, you don’t need to include the body, head or html tags, since these are generated for you. If you need to include scripts, external CSS libraries (bootstrap, for instance), do so on the settings for the pen:

I hope it helps :slight_smile:,

Stay safe and happy coding!

Thank you so much for your reply. I am using Chrome. But Still not work.

1 Like

Hey supan,
I looked at your Pen and I think that when you style the ul li, you should add margin: -3px and change the border from 2px solid to 2px solid black. You might have to add more margin-top and/or margin-left in the ul element, but overall it should be fine.

Hope this helps!


hiii kudouz,
thank you so much for your help. I already solved this problem. yes the problem was in margin :slight_smile: