Media query not working without !important

Explanation

How the browser see your CSS without !important:

for screen 200px < x < 800px do this {
  bla bla bla
}
but... wait a second.. forget about it, do this for all screens {
  bla bla bla
}

When you add !important the browser will take it like this:

for screen 200px < x < 800px do this {
  bla bla bla
  !do not listen to me if I will ever give you any other instructions
}
but... hey dude, want any instructions? Can you do this for all screens? {
  bla bla bla
}

If you place @media block in the end of your file and remove all the !importants it will look like this:

for all screens do this {
  bla bla bla
}
but for screens 200px < x < 800px do this {
  bla bla bla
}

Demo

Open this snippet in full page mode and try to change browser's window size

@media (max-width: 800px) {
    .bad {
        background-color: green;
    }
}

.bad, .good {
    width: 100px;
    height: 100px;
    background-color: firebrick;
}

@media (max-width: 800px) {
    .good {
        background-color: green;
    }
}

<div class="good"></div>
<div class="bad"></div>

Flip the order to place the media query later. It doesn't seem to add any selector weight, so the later one takes priority.

So you would have (snipped):

html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
@media all and (min-width: 200px) and (max-width: 850px) {
    html body {
    position: absolute;
    height: 100%;
    width: 100% !important;
    margin: 0 auto;
    text-align:center;
    }
}

See, for example, CSS specificity on MDN, which does not list @media-queries as increasing weight.