Bootstrap nav-justified inside div.col-* not working as expected - css

Question

I am facing a problem with bootstrap 3 and the nav-justified class. When I put the nav inside a div with class col-*, it does not work properly. When you try to minimize the screen, if the resolution is less than 1500px the <li> overflows the div. I was wondering why.
I would like to know if I am missing something. Here goes an exemple of code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading clickable">
XYZ
<span class="pull-right"><i class="fa fa-caret-up fa-lg"></i></span>
</div>
<div class="panel-body ">
<ul class="nav nav-pills nav-justified" role="tablist" id="myPill">
<li role="presentation" class="active">External I/O</li>
<li role="presentation">Version Information</li>
<li role="presentation">Config Information</li>
<li role="presentation">Channel A</li>
<li role="presentation">Statistics</li>
<li role="presentation">ADC</li>
<li role="presentation">Sampling Info</li>
<li role="presentation">Flags</li>
</ul>
<hr />
<div class="tab-content" id="advancedContent">
<div class="tab-pane active" id="externalio">
</div>
<div role="tabpanel" class="tab-pane" id="versionInformation">
</div>
<div role="tabpanel" class="tab-pane" id="configInformation">
</div>
<div role="tabpanel" class="tab-pane" id="channelA">
</div>
<div role="tabpanel" class="tab-pane" id="statistics">
</div>
<div role="tabpanel" class="tab-pane" id="adc">
</div>
<div role="tabpanel" class="tab-pane" id="samplingInfo">
</div>
<div role="tabpanel" class="tab-pane" id="flags">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thank you.

Answer 1

I have a easy solution. Use this code below:
#media screen and (max-width:1500px){
.panel .nav>li>a{
padding:5px 0;
}
}