Bootstrap li a padding 0 not working

Question

I'm trying to set padding to 0 px for hyperlink inside the li tag but its not working. If I set that in inline for that specific hyperlink then its working fine.

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <ul class="nav nav-pills nav-stacked ">
                <li class="active"><a href="nokia-phones-1.php">Nokia</a></li>
                <li><a href="samsung-phones-9.php">Samsung</a></li>
                <li><a href="motorola-phones-4.php">Motorola</a></li>
                <li><a href="sony-phones-7.php">Sony</a></li>
            </ul>
        </div>

    <div class="col-xs-10">
        <h2>Most Viewed</h2>
    </div>
    </div>
</div>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.1.1/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");

li a {
padding: 0px;
}

http://jsfiddle.net/TxdAm/

I even tried

ul li {    padding: 0px;}

and

li  {    padding: 0px;}

and

a  {    padding: 0px;}

but still its not working.

How can I set the padding to 0px for hyperlinks inside the unordered list.

Answer 1

You need to override the class of bootsrap, just add this CSS rule:

.nav > li > a {
    padding: 10px 0;
}

In Bootstrap this rule's value is 10px 15px, so this should fix it.

Hope this helps.

Answer 2

You can try using !important in CSS rule

li a {
    padding: 0px !important;
}

It will work. For more info about !important: look here