Twitter Bootstrap - navbar-nav padding-right is getting overlapped

Problem

I am using Bootstrap navbar. inside that i am using navbar-nav and navbar-button all floated to the right. navbar-button have a padding-left of 12px and the last anchor tag of navbar-nav have a padding-right of 15px.

My question is why i am not getting space of 12px + 15px

JsFiddle

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="">nav1</a></li>
            <li><a href="">nav2</a></li>
            <li><a href="">nav3</a></li>
            <li><a href="">nav4</a></li>
        </ul>
    </div>
</div>
</nav>
Problem courtesy of: shubendrak

Solution

Your style got overwritten of using this.

@media (min-width: 768px){
.navbar-nav.navbar-right:last-child
 {
   margin-right:-15px;
 }
}
Solution courtesy of: Suresh Ponnukalai

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.