Override Bootstrap CSS

Question

I am using nav pills from Twitter-Bootstrap. At certain screen resolutions, the pills are pushed down for no apparent reason. When using Firebug, if I eliminate the display:table from the .nav-pills, the problem goes away. I have tried to override the display:table in one of my own .css files, but so far Firefox always views my override attempt as a separate style.

Here is an example of the problem. I know this is not the best way to handle the problem, but it looks like the best way to demonstrate the problem.

Thanks in advance,

Bootstrap CSS:

.nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after 
{
    content: "";
    display: table;
}

My CSS:

.nav-tabs:before, .nav-pills:before, .nav-tabs:after, .nav-pills:after 
{
    display:block !important;   
}

CSS results: Firefox appears to recognize both css statements as separate styles, when my display style should override the bootstrap style.

Answer 1

If you inspect your element in Chrome, you can see if a css selector, applied to that element belongs to a media query.

When you configured your bootstrap download, did you check the options in the Responsive section?

I guess that the problem is that a css selector from a media query is overriding your own css-selector.