Mobile @media query not making container cover whole screen

Question

I have a survey page, with a background-color: red and a smaller container to hold survey contents, as in the example below from a desktop:

Now, I have used these @media queries to attempt to make the white container cover the whole page on a phone (so the whole page is the white container, no red background)

@media (max-width: 600px) {
  #survey-container {
    width: 100%;
    padding: 0px;
    }
  }
  @media (max-height: 800px) {
  #survey-container {
    height: 100%;
    padding: 0px;
    }
  }

Now, these queries have seemingly no effect on a mobile phone, giving me this page:

Why is my container still not covering the whole page?

Full HTML code here, giants-survey.html page: https://glitch.com/edit/#!/jdipasquale

Answer 1

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500) }

The bracket in the end of this font import caused the @media queries to not work, removing it and adding min-width: 100% made it work.