Resizing border bottom
<p><a href="https://i.stack.imgur.com/gwFgk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gwFgk.png" alt="enter image description here"></a></p>

<p>I want to resize the border bottom to half so it's align to the link students. How can i resize that? im trying to resize but just the thickness is moving not the length. You can see the picture above.</p>

<p>here is my html code.</p>

<pre><code>    &lt;nav class="navbar navbar-default navbar-top"&gt;
&lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"&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;img class="img-responsive" src="&lt;?php echo get_template_directory_uri(); ?&gt;/img/brandz.png" &gt;
    &lt;/div&gt;

&lt;div class="collapse navbar-collapse" id="nav-collapse"&gt;

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

<p>
</p>

<p>here is my css</p>

<pre><code>       .navbar-default .navbar-nav &gt; li &gt; 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&gt;li&gt;a {
       position: relative;
       }
      .navbar-default .navbar-right &gt; li &gt; 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 &gt; li{
       display: :inline-block;
       }
       .nav.navbar-nav{
       list-style-type:none;
       }
       .nav.navbar-nav &gt; li &gt; 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;

      }
</code></pre>