overwrite bootstrap css rules not working, css files and rules seen but properties ignored - twitter-bootstrap-3

Question

I use bootswatch v3.3.6 and django 1.11.2
I want to make a button full width inside a bootstrap's table column, but something very peculiar happens as can be seen in the following pictures:
I want to make that blue button full width. I have added a btn-buy class to my template and the corresponding css:
.btn-buy.btn-primary {
"width": 100%;
}
The problem is that width property is ignored as the red arrow points. However if I click on store.css :
and write on the firebug console the property:
then the modification is applied correctly:
No matter how I write the class btn-buy or e.g if I make it an id instead, the result is the same.
This is the relevant DTL code:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="plan-thumb" class="thumbnail">
<h3>Name</h3>
<hr>
<h4 align="center">{{ plan.description }}</h4>
<ul>
<li>Calls per minute: {{ plan.requests_per_minute }}</li>
<li>Calls per day: {{ plan.requests_per_day }}</li>
<li>Calls per minute: {{ plan.requests_per_month }}</li>
</ul>
<h5 class="pull-middle">Price per month: {{ plan.price }}$</h5>
<hr>
<div class="bottom-align-text">
{# todo this should be JS instead of new url, pushing a popup of terms etc #}
<button type="button" class=" btn-buy btn-primary" href="#"> Buy
{# href="{% url 'store:buy' plan_id=plan.id %}"> #}
</button>
</div>
</div> {# end of thumbnail div #}
</div>
Any ideas on why my modifications are not being applied automatically?