title: My media queries are not working
body: <p>I know that there are lots of questions that look like this one, but nothing has worked for me so far. I have an unique CSS document for a whole website and, at the bottom of this document, I have this:</p>
  
  <pre><code>@media (max-width: 1250){
  
      #opcoes{
          display: none;
      }
  
      #expresso{
          display: none;
      }
  
  }
  </code></pre>
  
  <p>Basically, my site template is designed like this:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id = "menu"&gt;
  &lt;/div&gt;
  
  &lt;div id = "principal&gt;
  &lt;/div&gt;
  
  &lt;div id = "opcoes"&gt;
     &lt;div id = "expresso"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Apparently, my "opcoes" and "expresso" div are not disappearing when I reduce the browser width to less than 1250. What am I doing wrong?</p>