<li>s don't evenly distribute using justify method

Question

I'm attempting to create a navigation bar for a website I'm building. I followed this answer among others and still have been unable to get it to work. Instead of distributing the items horizontally, it extends each one to take up the entire line.

My goal is the same as that of the previous question, to dynamically and evenly distribute menu items horizontally such that if I add another item I don't have to manually change anything other than adding the new <li>. Here's a JSFiddle showing the problem:

http://jsfiddle.net/u7y2zjnm/

What am I doing wrong?

Answer 1

Replace

li.navbar {
...
color: #ffffff
...
}

by

color: #ffffff;

you forgot the ';'