How to position nav element center under parent div? - css

Question

I've added a second nav element to a view, under the site banner. But when the screen is expanded at it's default resolution, the menu is skewed to the left of the site banner.
My aim is to position the menu directly under in line with the site banner. I made a new JSFiddle link of the page setup to explain the current positioning issue.
I did inspect with Chrome dev tools and it look like a padding causing the positioning highlighted in orange:
The menu currently appears of center like this:
Whereas I want position it directly under the "Self Service" div like this:
I've tried reducing the right margin on the nav element's custom CSS in order to push in further right in line with the banner:
#chartNav {
background-color: #614767;
display: inline-block;
padding: 10px 20px 10px 20px;
margin: 0 5% 0 10%;
padding-bottom: 20px;
text-align: center;
}
But the nav menu is still pulling off center of the banner.
Question:
How can I position a nav element center under parent div?
This is a gist of the markup containing the banner site title div and it's containing nav menu:
<div class="container-fluid">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-10 col-xs-6">
<label class="main-title">Self Service</label>
</div>
<div class="row">
<div class="col">
<div class="col">
<nav>
<ul id="chartNav">
<li><a>Asset Selection:</a></li>
<li>
<a>All <span class="arrow">&#9660</span></a>
<ul class="sub-menu">
<li><input type="checkbox" /> Option 1</li>
<li><input type="checkbox" /> Option 2</li>
</ul>
</li>
<li><a>Date Range:</a></li>
<li>
<input class="input-sm" type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
</li>
<li><a>Profile:</a></li>
<li>
<a>Default <span class="arrow">&#9660</span></a>
<ul class="sub-menu">
<li><input type="checkbox" /> Option 1</li>
<li><input type="checkbox" /> Option 2</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>

Answer 1

Adding this seems to solve the issue, the first two lines align the nav's container to the center, while the third removes that unnecessary left margin that you mentioned.
.col-md-10{
width: 100%;
text-align: center;
margin-left: 0px;
}
check it out https://jsfiddle.net/m7h541vb/3