Bootstrap wie Padding aus dem Header zu löschen?

Question

Ich möchte eine aktive Klasse für meine Header-Menü erstellen Ich versuche, Padding oben und unten für alle Elemente in meiner Kopfzeile zu löschen und nichts funktioniert.

Hier ist mein Code:

<header> 
       <nav class="navbar navbar-default"> 
        <div class="container-fluid header-custom"> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          </button> 
          <a class="navbar-brand" href="index.html"><img alt="Climatherm" src="img/home.png"></a> 
         </div> 
         <p class="navbar-text pull-right hidden-xs hidden-sm">09 99 99 99 99</p> 
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
          <ul class="nav navbar-nav"> 
          <li class="active"><span><a href="#">Plomberie Sanitaires</a></span></li> 
          <li class="active"><span><a href="#">Chauffage Climatisation</a></span></li> 
          <li class="active"><span><a href="#">nouvelles énergies</a></span></li> 
          <li class="active"><span><a href="#">dépannage maintenance</a></span></li> 
          <li class="active"><span><a href="#">Partenaires</a></span></li> 
          <li class="active"><span><a href="#">nous Contacter</a></span></li> 
          </ul> 
         </div> 
        </div> 
       </nav> 
     </header> 

Mein CSS-Code

body{ 
    font-family: 'Roboto', sans-serif; 
    max-width: 1200px; 
    margin-left:auto; 
    margin-right:auto; 
} 

.navbar-default { 
    background-color: #ed1c24; 
    border:none; 
    border-radius:0px; 
} 

.header-custom{ 
    max-width:1000px; 
    padding-top:0px; 
    padding-bottom:0px; 
} 


.navbar-text{ 
    font-size: 18px; 
    font-weight: 700; 
    color:#fff!important; 
    background-color:#d80109; 
    border-radius:18px; 
    padding:8px 20px 8px 30px; 
    margin-top:8px; 
    margin-bottom:auto; 
} 

.navbar-text::before{ 
    content: url(../img/contact.png); 
    display:inline-block; 
    opacity: 1; 
    transform:translate(-13px, 4px); 
} 

.navbar-default .navbar-nav>li>span>a { 
    color: #fff; 
    font-size: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
} 

.navbar-nav{ 
    padding: 0; 
    text-transform: uppercase; 
} 

.navbar-nav li { 
    display: inline-block; 
    list-style: none; 
    margin-left: 10px; 
} 
.navbar-nav li { 
    max-width: 110px; 
    line-height: 40px; 
    height: 40px; 
    background-color: #000; 
} 
.navbar-nav li span { 
    display: -moz-inline-box; /* FF2 or lower */ 
    display: inline-block; /* FF3, Opera, Safari */ 
    line-height: normal; 
    vertical-align: middle; 
    text-align: center; 
} 
.navbar-nav li span { 
    *display : inline; /* haslayout for IE6/7 */ 
} 

und das Ergebnis ist:

results of my code

ich es so machen wollen:

Result expected

Ich habe versucht, in verschiedenen Foren nach einer Lösung zu suchen, und hier funktioniert nichts.

Answer 1

Ist diese Lösung durchführbar? fiddle example

Ich habe die Höhe der Schaltflächen gleich wie der Container (50px statt 40px).

.navbar-nav li { 
    max-width: 110px; 
    line-height: 50px; 
    height: 50px; 
    background-color: #000; 
}