右のナビゲーションバーのマージン

Question

完全な高さのタグを含むNavbarをブートストラップにしようとしていますが、動作させることができません。

#su 
 
{ 
 
    padding-top: 20px; 
 
    padding-right: 40px; 
 
    padding-bottom: 20px; 
 
    padding-left: 40px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    background-color: #ea3ace; 
 
    color: snow; 
 
}

<ul class="nav navbar-nav navbar-right"> 
 
    <li><a href="#" id="su">test</a></li> 
 
</ul>

しかし、ウェブサイトでは、それはこのように現れる：あなたが見ることができるように http://imgur.com/a/ZhyNK

、NAVの上部と右側に余白があります。あなたが私をちょっと助けることができるなら、何があっても本当に感謝しています。

Answer 1

ブートストラップのスタイルを単純に上書きすることができます。 navbar-rightクラスのmargin-right: 0;を使用し、セレクタに対してより高い特異性を使用します。

.nav.navbar-right { 
 
    margin-right: 0; 
 
} 
 
#su { 
 
    padding: 20px 40px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    background-color: #ea3ace; 
 
    color: snow; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul class="nav navbar-nav navbar-right"> 
 
    <li> 
 
    <a href="#" id="su">test</a> 
 
    </li> 
 
</ul>