Media Query problems
<p>Ok, I have encountered a problem while experimenting with media queries. I'm wondering if any of you could possibly help me on this issue. The purpose of this code is simple. When the screen size is above 600px the banner should not be visible and when the screen size is below 600px the banner should appear.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 600px) {
  .banner {
    display: none;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="banner"&gt;
  &lt;h1&gt;Banner&lt;/h1&gt;
  &lt;p&gt;Banner Content&lt;/p&gt;
&lt;/header&gt;</code></pre>
</div>
</div>
</p>

<p>Now as you run the code above(I assume you just did) there is nothing wrong.</p>

<p>Ok, now I will add similar code.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 600px) {
  .banner {
    display: none;
  }
}
.banner {
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="banner"&gt;
  &lt;h1&gt;Banner&lt;/h1&gt;
  &lt;p&gt;Banner Content&lt;/p&gt;
&lt;/header&gt;</code></pre>
</div>
</div>
</p>

<p>Outside of the query is a style that contradicts the style given in the media query. Now what I believe to know about media queries. The styles within the query should override any other existing styles just as long as the screen-size condition is met.</p>

<p>If this is normal, what would be the best way of having the style within the media query override the other existing styles outside the query.</p>