Bootstrap3 - Getting navbar elements to take up entire width - css

Question

I'm trying to create a webpage using bootstrap3 but have run into a problem in the navigation bar. I want the navigation links (there are 4 - "Web Design" "Development" "Photography" "Blog") to equally divide the space available in the horizontal navbar. At the min they are just piling up on the left. Here is a segment of the code - hopefully I haven't missed out an important bit. I have NOT amended the bootstrap CSS at all.
<div class="container-fluid">
<div class="row">
<!-- Navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active col-md-3">
Web Design
</li>
<li class="col-md-3">
Development
</li>
<li class="col-md-3">
Photography
</li>
<li class="col-md-3">
Blog
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<h1>Hello World!</h1>
</div>
</div>
</div>
</div>

Answer 1

I forced a few changes in the bootstrap layout with a couple of css rules, see if this doesn't float your boat :)
http://jsbin.com/xeniwonujeti/1/
my css changes:
.nav { width: 100%;}
.nav li { width: 25%; text-align: center; }
Obviously this will limit dynamic menu changes and you'll have to change it if the amount of links changes.