Unable to redefine bootstrap col-md width

Question

I am trying to redefine the width of col-md-4. If I go directly to the bootstrap file and edit the code below, it works. But when I open a new css file and put in the codes below and redefine the width, it does not work. Why? The problem I am trying to solve is because in IE7, I have 2 items in a row instead of 3, so I am trying to reduce the width by redefining it, so that 3 items will be on a row. Perhaps there are other suggestions?

@media (min-width: 992px) {
.col-md-4 {
    width: 33.33333333%;
  }
}

Answer 1

A more specific selector would be applied. You can read more from this article.

For your case, you can rewrite the rules to be more specific or by adding an !important tag for the attribute.

.col-md-4.wide { /* Or another more specific selector */

OR

width: 33.33333333% !important;