Center Bootstrap Menu Bar - css

Question

I've been trying to tackle this for hours, but I can't understand how to get my menu bar to center, I've tried applying different margins and paddings but obviously that won't center on all devices.
Here is the page showing the menu bar: http://newton-poppleford-weather.co.uk/index.htm
I don't want to paste in the scripts as they are huge, but please could someone give me a hint as to where I should be looking and if I should remove any margins I've set?
Thanks,
William

Answer 1

Okay, I hope this works for you.
Add this to your custom styles:
.navbar-nav {
float: none;
}
.navbar-toggle {
position: absolute;
float: none;
right: 15px;
margin-right: auto;
}
#media screen and (min-width: 768px){
.navbar-nav > li {
display: inline-block;
float: none;
}
}
Then amend your HTML by doing the following:
add hidden-sm hidden-md hidden-lg to navbar-header
add <li class="hidden-xs">Newton Poppleford Weather</li> within navbar-collapse
so your HTML should look like this:
<div class="navbar-header hidden-sm hidden-md hidden-lg">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.htm">Newton Poppleford Weather</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="main-nav">
<li class="">Newton Poppleford Weather</li>
<li class="active">Now</li>
<li><a id="click-today" href="today.htm" data-toggle="tab" data-tab-url="today.htm">Today</a></li>
<li><a id="click-yesterday" href="yesterday.htm" data-toggle="tab" data-tab-url="yesterday.htm">Yesterday</a></li>
<li><a id="click-thismonth" href="thismonth.htm" data-toggle="tab" data-tab-url="thismonth.htm">This Month</a></li>
<li><a id="click-thisyear" href="thisyear.htm" data-toggle="tab" data-tab-url="thisyear.htm">This Year</a></li>
<li><a id="click-records" href="records.htm" data-toggle="tab" data-tab-url="records.htm">Records</a></li>
<li><a id="click-trends" href="trends.htm" data-toggle="tab" data-tab-url="trends.htm">Trends</a></li>
</ul>
</div><!--/.nav-collapse -->

Answer 2

You could edit your .navbar CSS to:
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}