Drupal-Bootstrap CSS-oriented question Background

I've installed the Bootstrap theme, created a sub-theme, edited it's INFO file, and the theme itself seem to appear fine while surfing at the site.

The problem

I went to this themes' Style.CSS file and added some CSS, but for some reason, Most (if not all) of the CSS I add requires the !important declaration at the end of each property... Any idea why all of these !important's needed? It is surly not the natural behavior of any theme...

Further details


The site is RTL.
I'm not sure if there is a connection but this problem might do with the fact that my new sub-theme is running online only to me, via the ThemeKey module which let's you associate a specific theme with a specific something (like users).
As mentioned by @clive in the comments, the issue is certainly specificity or style precedence, which basically means that some CSS rules will have more importance than others. I'll give you the 2 most basic things you need to know:

Order. The latest in the code a CSS rule is, the more power it has. So, your custom CSS stylesheet should be loaded after other stylesheets. 

Selector specificity. By rule, the more specific a selector is, the more power it has. An ID selector takes precedence over a class selector, and a class selector over an element selector. For instance, let's say you want to style a div:

&lt;div id="login" class="col-md-1"&gt;...&lt;/div&gt;


In your CSS, you could reference this div in, basically, three ways:

div { color: red; }

.col-md-1 { color: green; }    

#login { color: orange; }


In this case #login rules will have precedence because of two reasons: Order (it is below the other two selectors) and Selector specificity (an ID selector is more specific because it's unique). Therefore, the text color will be orange.

The only exception to these rules is when you use the !important keyword, which adds superpowers to your rule, forcing it to take precedence over any other selector. That's why in your code, it only works when you do this, as you mention.

So, instead of adding !important, try to understand your selectors and you'll do just fine. 

EDIT: As mentioned in the comments, a syntax error (in this case, a missing bracket) in your CSS file could cause all following code not being read (Tip: If you use SASS or Scss, they will alert you of these type of errors).