title: Width doesn't respond according to the media query
body: <p>I was experimenting with media queries to see the effects.
  So I tried using <code>min-width(480px)</code> query to change the width of a <code>div</code> from <code>100%</code> to <code>520px</code> <em>when the window was maximised</em> but the width of the <code>div</code> stays <code>100%</code>.</p>
  
  <p><strong>The code:</strong></p>
  
  <pre><code>#box {
      margin: auto;
      background: white;
      width: 100%;
  }
  // Media Queries
  @media only screen and (min-width: 480px) {
      #box {
          width: 200px;
          max-width: 200px;
          background: black;
      }
  }
  </code></pre>
  
  <p>So my question is, why does the width of the <code>#box</code> stay as <code>100%</code> <em>when the window is maximised</em>?<br>
  What am I doing wrong?</p>