Aligning navigation links evenly bootstrap 3 - html

Question

I have the following nav bar
As you can see either side of the logo in the middle, there is a great deal of white space ideally I would like to space the navigation links out evenly so it would look something like this
I have achieved what is shown in the second picture by using padding-left and padding-right which to me seems a bit of a hack, I've googled looking for a potential solution for this but with no avail. this is my current html you can see the padding I have entered.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
</button>
</div>
<a class="navbar-brand visible-lg visible-md hidden-sm hidden-xs"
style="background-image: url('/Content/Images/logo.png'); background-repeat: no-repeat; height: 94px; width: 301px; left: calc(50% - 148px); "
href='#Url.Action("Index", "Home")'></a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li id="lnkProducts">#Html.ActionLink("PRODUCTS", "Products", "Products")</li>
<li>FLAVOUR LAB</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li id="lnkVisitUs">VISIT US: <b>f</b></li>
<li id="lnkContactUs" class="visible-xs-block">#Html.ActionLink("CONTACT US", "Contact", "Contact") </li>
</ul>
</div>
</div>
</nav>
Thanks
** Update **
As requested please see below CSS for left and right nav bar
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
** Update **
This is whats shown when minimized to a mobile screen

Answer 1

I think you need to add width to your .navbar-left and .navbar-right to do this. and then add floats to the inner elements.
For example
<ul class="nav navbar-nav navbar-left" style="width:380px">
<li style="float:left" id="lnkProducts">#Html.ActionLink("PRODUCTS", "Products", "Products")</li>
<li>FLAVOUR LAB</li>
</ul>
UPDATE -
If giving width in PX to your navbar is not working in mobile you can use calc function in css to give the width. If the size of your middle icon is 301px*91px use following width for your left and right navbars
width: -webkit-calc(50% - 150px);

Answer 2

This may or may not be considered a hackish solution, depending on your need, but if you also need it to be responsive I'd probably go with table-display.
Yes, I know. But it keeps the layout clean and it works, at least until your logo's width is less than 20% of the container's width.
HTML:
<nav class="navbar navbar-default">
<div class="container">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
<div>link1</div>
<div>link2</div>
<div class="text-center">logo</div>
<div class="r">link3</div>
<div class="r">link4</div>
</divv>
</div>
</div>
</nav>
CSS:
.navbar-nav { display: table; }
.navbar-nav > div { display: table-cell; width: 20%; }
.navbar-nav > div.r { text-align: right; }
The other thing to manage with this approach is that you have to build another, separate menu for the fluid viewport and switch between the two depending on screen size.