Twitter Bootstrap centering responsive navbar gap on background hover

Question

I have tried this solution in order to center my bootstrap nav , however is its causing a small gap at the bottom of my on hover effects? I think this is due to the float but i dont know how to fix it.

navbar-collapse.collapse {
text-align: center; /* Set this */
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
font-weight:bold;
}

/* This should be around line 4866 in your bootstrap.css */
.navbar-nav {
display:inline-block;
float: none;
margin: 0;
}`

EDIT ----

Link to code http://www.bootply.com/sp1jl3CnJ0

Answer 1

You can try this

CSS

.navbar-nav {
    display: table;
     float: none;
   margin: 0 auto;
}