Overriding media queries for particular width - CSS

I have created a sub-theme of Responsive Bartik and I need to reduce the width of sidebars without touching the original theme:

Original:

@media all and (min-width: 851px) {
.
.
.
  #sidebar-first {
    width: 25%;
    margin-left: -100%; /* LTR */
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%; /* LTR */
    clear: none;
  }
.
.
.
}

CSS in sub-theme:

/* Raj: To reduce the width of the sidebar: */
@media all and (min-width: 851px)
{
    #sidebar-first {
        width: 18% !important;
        margin-left: -92% !important; /* LTR */
    }
    #sidebar-second {
        width: 18%;
        margin-left: -32%; /* LTR */
        clear: none;
    }
}

To my surprise the original CSS is taking effect. Except for the media queries any other css properties I am able to override. If I change 25% to 18% and -100% to -92% in the original css file itself I am getting the desired result, but I am not able to figure out how to override these values in another css file.

I tried to google but all I am getting is regarding the priorities in media queries but nothing regarding overriding.