Bootstrap Menu Tabs "Jump" on mobile and tablet - html

Question

I'm using Bootstrap to develop a menu for a client, but for some reason when I click certain tabs in mobile or tablet mode, the tabs "jump" to another location on the list and leaves an ugly space in between tabs. I made a .gif to show what I'm talking about.
Any ideas why this is happening? I included my own HTML and CSS below. Keep in mind I'm using Bootstrap CSS and JS as well.
EDIT: I think it may have to do something with floats.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#waxing" role="tab"> WAXING </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nail-art" role="tab"> NAIL ART </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#nail-enchancements" role="tab">
<div class="hidden-xs"> NAIL ENCHANCEMENTS </div>
<div class="hidden-sm hidden-md hidden-lg hidden-xl"> NAIL ENH </div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#children" role="tab"> FOR CHILDREN </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#vitamin-dip" role="tab"> VITAMIN DIPS </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#gel-services" role="tab"> GEL SERVICES </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#combo-services" role="tab"> COMBINATIONS </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pedicure" role="tab"> PEDICURES </a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#manicure" role="tab"> MANICURES </a>
</ul>
CSS
.nav-tabs{
background-color:#fff;
border-radius: 3px 6px 0px 0px;
}
.nav-tabs > li {
float: right;
margin-bottom: -1px;
background-color: #fff;
margin:auto;
}
#media(max-width:992px){
.nav-tabs > li {
width:50%;
}
}
.nav-tabs > li.active > a:focus, .nav-tabs > li.active {
border-bottom-style:none;
border-bottom-width: 0px;
background-color: #d3d3d3;
margin-bottom: -1px;
}
#menu-tabs .nav-link{
font-weight: bold;
color: #000;
font-size: 0.8em;
}
#waxing li, #other li {
line-height: 23px;
}

Answer 1

I solved my problem. I did it by explicitly setting the height of each li.
#media(max-width:992px){
.nav-tabs > li {
height: 37px;
width:50%;
text-align:center;
}
}
I think my problem was that I assumed all the li will keep the same height when I click on the link (focus on the a tag) within each li. I know using the float property on elements that are not the same width and height may cause gaps between the elements, hence the ugly gaps and jumps in my original code.