Q:

Media Query does not overwrite the css even when its after

I have taken a screenshot of it in google chrome devtools to help explain this.

I have used scss that is then ccompiled to css using Koala. The media query is after the original css meaning it should be over written, however this is not the case.
Any explanation is appreciated (I have added some code examples so you dont have to view the image)
Line 190:
#recent-users, #frequent-trees{
  width: calc(50% - 80px);
  padding: 0px 40px;
}

Line: 261:
@media only screen and (max-width: 600px) {
  #recent-users, #frequent-trees {
    width: 90%;
    padding: 0px 5%;
  }
}

A:

If you look carefully the selector is:
#content #recent-users, #content #frequent-trees

You either set the same for the media query:
@media only screen and (max-width: 600px) {
  #content recent-users, #content #frequent-trees {

or use !important rule to override it:
@media only screen and (max-width: 600px) {
  #recent-users, #frequent-trees {
    width: 90% !important;
    padding: 0px 5% !important;
  }
}

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

