Center the elements in my responsive navigation bar

Question

The navigation bar on my site is centered, but I can't get the items within it to center as well. Can anyone help me?

Answer 1

You'll need to change these in your css: (Any commented property should be removed)

.navbar ul {
  /* letter-spacing: -0.01em; */
}

.navbar .nav {
  border-right: 2px solid black;
  /* position: relative; */
  /* left: 0; */
  display: inline-block;
  /* float: left; */
  margin: 0;
  /* width: 100%; */
  /* height: 10px; */
}


.navbar li {
  /* width: auto; */
  /* display: block; */
  display: inline-block;
  margin-bottom: 0;
  /* line-height: 40px; */
  /* font-size: 14px; */
}

.navbar {
  text-align: center;
}

And remove the ".divider-vertical" li, is not needed, it adds no semantic value to your code.

Answer 2

Quick fix:

.navbar .container {
    text-align:center;
}

.navbar .nav {
   /*float:left;*/
   display:inline-block;
   vertical-align:top;
}

.nav-collapse {
    display:none;
}

.navbar .divider-vertical {
    height:42px;
}

As your site appears to be responsive, you might want to adjust styles appropriately when going down to smaller screen sizes.

Btw, interesting news headlines :)