Bootstrap 3 css override only working on localhost

I am using bootstrap 3 and web2py.

I want to use the panel-primary from Bootstrap but the background colour isn't working and the body has too much padding.

I have my own css file which is loaded after bootstrap to override various things as I customise my app.

<link rel="stylesheet" href="{{=URL('static','css/bootstrap.min.css')}}"/>
<link rel="stylesheet" href="{{=URL('static','css/web2py-bootstrap3.css')}}"/>
<link rel="stylesheet" href="{{=URL('static','css/offertool.css')}}"/>

For the panels I have this in the offertool.css file:

    .list-group-item {
    padding: 5px 5px;
}

.panel-primary .panel-title {
    background-color: #1E90FF;
}

This works just fine locally and then I upload the app and my css stops working. Adding !important didn't work and I even tried to hack it by adding these styles as inline styles as a temporary fix but it does nothing.

Why is working on my localhost but not uploaded?

Solution

I have had this happen to me a couple times when trying to override bootstrap styles. Often the culprit is found by checking the following:

Clear cache (open page in chrome incognito mode ). If you are using cloudflare, set your site to development mode. If your site has caching scripts clear those as well.
Check css links in header, make sure you uploaded the latest version of your header.
Ensure your uploads are actually updating, check the source table for your css file in the chrome inspector.
Reupload all files, not just your css files, make sure your server mirrors your localhost.

If its still not showing after you've checked all that, I'm not sure what to tell you. The only reason !important won't override a style is if that style is an inline style.