How to change width of element that has Bootstrap styling applied - html

Question

I have col-sm-4 Bootstrap classes applied to some list elements that are inside a jQuery slider (lightslider) component.
When the screen is between 801px and 991px, I want the list element to increase to 160px since currently, it is too small and the data is squashed a bit.
In Chrome developer tool, the styling is applied from the following css:
element.style {
width: 142px;
margin-right: 10px;
}
This is my HTML:
<ul id="responsive" >
#foreach (var item in Model.Categories)
{
<li id="list-size-increase" class="col-sm-4 align-centre list-size-increase">
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</li>
}
</ul>
I've attempted with this id class, but I see no change:
#media (min-width: 801px) and (max-width: 991){
.list-size-increase{
width:160px;
}
}

Answer 1

This solved it:
#media (min-width: 801px) and (max-width: 991px){
.list-size-increase {
width: 160px !important;
}
}
The !important keyword allows new styling to take precedence over inline styles. Oh how I love remembering and learning.