ボーダーボトムのサイズを変更する

Question

リンクの生徒に合わせて、ボトムのサイズを半分に変更したいと考えています。どのようにサイズを変更できますか？サイズ変更しようとしていますが、厚みだけが長さではありません。上の写真を見ることができます。

ここは自分のhtmlコードです。ここ

<nav class="navbar navbar-default navbar-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
      <span class="icon-bar" ></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/img/brandz.png" > 
    </div> 

<div class="collapse navbar-collapse" id="nav-collapse"> 

    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Students</a></li> 
     <li><a href="#">Faculty</a></li> 
     <li><a href="#">Contact us</a></li> 
       <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       <!-- Modal --> 
        <div id="myModal" class="modal fade" role="dialog"> 
         <div class="modal-dialog"> 
       <!-- Modal content--> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
          </div> 
          <div class="modal-body"> 
           <p>Some text in the modal.</p> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div> 
         </div> 
         </div> 
        </div> 
    </ul> 
</div> 

私のCSSは

 .navbar-default .navbar-nav > li > a { 
     font-weight: 590; 
     color: #949494; 
     display: block; 
     padding: 5px 35px 2px 45px; 
     border-bottom: 3px solid transparent; 
     line-height: 97px; 
     text-decoration: none; 
     transition: border-bottom-color 0.5s ease-in-out; 
     -webkit-transition: border-bottom-color 0.5s ease-in-out; 

     } 
     .navbar-default{ 
     background-color:#fff; 

     } 
     .nav>li>a { 
     position: relative; 
     } 
     .navbar-default .navbar-right > li > a { 
     padding-left: 70px; 
     padding-right: 1px; 
     } 
     .navbar-default .navbar-toggle .icon-bar { 
     background-color: #000000; 
     margin:0 0 4px; 
     width: 25px; 
     height: 5px; 

     } 

     .nav.navbar-nav > li{ 
     display: :inline-block; 
     } 
     .nav.navbar-nav{ 
     list-style-type:none; 
     } 
     .nav.navbar-nav > li > a:hover{ 
     color:#a92419; 
     border-bottom-color: #a92419; 
     } 

     .navbar-default .navbar-toggle .icon-bar { 
     background-color:#a92419 ; 
     margin:0 0 4px; 
     width: 25px; 
     height: 5px; 

     } 
     .navbar-default .navbar-toggle:focus, .navbar-default .navbar- toggle:hover  { 
     background: none; 
     } 
     button.navbar-toggle{ 
     background:none; 
     border:none; 
     color:#000; 

     } 

Answer 1

にすべてのスペースを残す必要がある私は、このことにより、すでにそれを解決しました。

.navbar-default .navbar-right > li > a { 
    padding: 0 30px; 
} 

Answer 2

はあなたが持っている代わりに、パディング

のマージンを使用してみてくださいです：

.navbar-default .navbar-right > li > a { 
    padding-left: 70px; 
    padding-right: 1px; 
    } 

の代わりに、パディングル70ピクセルの試みであることフィート：

.navbar-default .navbar-right > li > a { 
    margin-left: 70px; 
    padding-right: 1px; 
    } 

左