navアイテムとロゴを揃えようとしたときに背景画像が伸びる

Question

私はナビアイテムを自分のロゴに合わせるようにしていましたが、誰かが私がやった行の高さを追加するよう教えてくれました。私のナビゲーションボタンの周りにある背景色が伸びています。下の画像は私の問題を示しています

これは私が行の高さを追加する前に私のナビゲーションが見えた方法です：

が、私は実際にそれがでない方法を見て背景を取得したいと思いをここで第二の画像

は私のhtmlです：ここ

<header id="header" role="banner"> 
      <div class="header-inner"> 
       <nav class="navbar"> 
        <div class="container text-xs-center"> 
         <div class="navbar-nav"> 
          <a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a> 
          <a href="#" class="nav-item-link nav-item nav-link">Our Team</a> 
          <a href="#" class="nav-item-link nav-item nav-link">Media</a> 
          <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a> 
          <a href="#" class="nav-item-link nav-item nav-link">About Us</a> 
          <a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a> 
          <a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a> 
         </div> 
        </div> 
       </nav> 
      </div> 
     </header> 

がmでありますYのCSS：

a.nav-item{ 
    color:#000; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-weight:bold; 
    padding:20px; 
    line-height: 8em; 
} 

a.nav-item:hover{ 
    color:#000; 
} 


.navbar-nav{ 
    display:inline-block; 
} 

#donate{ 
    background-color: #7ED321; 
    border-radius: 8px; 
} 

任意の助け問題がa.nav項目の線の高さが、パディングではない

Answer 1

を理解されるであろう。

a.nav-item{ 
     color:#000; 
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
     font-weight:bold; 
     padding:10px 20px 10px 20px; 
     line-height: 8em; 
    } 

私はパディングを変更し、あなたが望むもののように見えます。

フィダルをチェックしてください：https://jsfiddle.net/amritanshujoshi/o0j2L6pn/