Navbar li elements closer to each other

Question

Is there any way to make the li elements in the navbar closer to each other?

This is what I got now: http://www.bootply.com/JTr4LHykbe

Answer 1

Just mention width : auto and it will work fine

.navbar-default .navbar-nav>li {
width: auto;
}

If you mention any static width to li then if any of the text is too big then it will overflow the li tag.

to make the navbar center:

 .navbar {
  background: transparent;
  border: none;
  float: none;
  width: 50%; // adjust it as you want
  margin: auto;
}