Bootstrap nav pill left and right padding are not equal - html

Question

I am trying to create a container with 2 tabs using nav-pills in bootstrap. However the gap (white space on the left hand side of the button) is not equal to the gap on the right hand side of the button. I have not added any special padding either.
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0">
<div class="container">
<ul class="nav nav-pills" style="width:96%;">
<li class="active" style="width:48%; text-align: center;">Home</li>
<li style="width:48%; text-align: center;">Menu</li>
</ul>
</div>

Answer 1

Give margin:0 auto; to the .nav-pills element. The .nav-pills has width:96%; so it is aligned to the left side of .container. By using margin:0 auto;, the .nav-pills is centered horizontally.
Jsfiddle
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0">
<div class="container">
//Add margin:0 auto;
<ul class="nav nav-pills" style="width:96%;margin:0 auto;">
<li class="active" style="width:48%; text-align: center;">Home</li>
<li style="width:48%; text-align: center;">Menu</li>
</ul>

Answer 2

You can use nav-justified for this and then just adjust the display rule for under 768px in case you don't want them to stack.
See working Example Snippet.
/**BORDER FOR DEMO ONLY*/
.nav.nav-justified {
border: 1px solid #f00;
border-radius: 4px;
}
/**BORDER FOR DEMO ONLY*/
#media (max-width: 767px) {
.nav-justified.nav-pills-nav > li {
display: table-cell;
width: 1%;
}
.nav-justified.nav-pills-nav > li > a {
margin-bottom: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h3>Won't stack on Mobile</h3>
<ul class="nav nav-pills nav-justified nav-pills-nav">
<li class="active">Home
</li>
<li>Menu
</li>
</ul>
</div>
<hr>
<div class="container">
<h3>Default: Will stack on Mobile</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Home
</li>
<li>Menu
</li>
</ul>
</div>