Collapsed menu in Navbar: removing transparent margin from list elements?
<p>I've been searching for a few hours on this and poured over the bootstrap code to no avail so here I am! I set my navbar to collapse at 991px and, once viewed, the list elements have the background color I wanted, but when you hover over them there's apparently a transparent margin for each list element. How would I get rid of this margin, i've been messing with  <strong>navbar-nav li a</strong> and my links in the navbar are H5s so also <strong>navbar-nav li a H5</strong>. The last list element is a dropdown link and in the media query when clicked it remains as if hovered over so I'm assuming there's a focus tag with it I just can't think exactly how to fix these two things (still very new to CSS/Bootstrap if you didn't know). Here is the HTML below and any help is very much appreciated!  </p>

<pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
&lt;div class="container-fluid"&gt;
  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  data-target="#topFixedNavbar1"  aria-expanded="false"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;a class="navbar-brand" href="#"&gt;Logo&lt;/a&gt;&lt;/div&gt;
  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="topFixedNavbar1"&gt;



    &lt;ul class="nav navbar-nav navbar-right links"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;h5&gt;How We Work&lt;/h5&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;h5&gt;Abous Us&lt;/h5&gt;&lt;/a&gt;&lt;/li&gt;

      &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;h5&gt;Course Subjects&lt;/h5&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- /.navbar-collapse --&gt;
&lt;/div&gt;
&lt;!-- /.container-fluid --&gt;
</code></pre>

<p></p>

<p>And here is the CSS (I included the whole file, but I'm pretty sure the problem will have to do with the media query):</p>

<pre><code>body{
padding-top: 120px; 
background-color:#34A0CD;
}
.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;   
}

#topFixedNavbar1{
height:120px;
}
.links{
height:120px;

}
.navbar-nav li a h5{
line-height:80px;
}
.dropdown li a {
line-height:30px;
}
@media (max-width: 991px) {
.dropdown li a{
    line-height:30px;
}

.collapse.navbar-collapse{
    width:100%;

}
.links li a{

    width:100%;
}
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar-collapse.in {
overflow-y: visible;
}

.navbar-collapse.collapse {
    display: none!important;

}
.navbar-nav {
    float: none!important;

}
.navbar-nav&gt;li {
    float: none;
}
.navbar-nav li a h5{
line-height: 30px;
background-color: gray;
color: #F1E9E9;     
}
.navbar-nav li a{
    background-color:gray;
    width:100%;
}

.navbar-text {
    float: none;
    margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in { 
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}

}
</code></pre>