title: Media Query rules not taking priority
body: <p>So I am working on a site, having a weird issue with a media query, some of the rules being overridden. It's for a template, so there is a base 'framework' CSS, and then another template specific CSS file that comes after. For clarity, this is the order in my HTML file</p>
  
  <pre><code>&lt;link href="/themes/Base/base.min.css" rel="stylesheet" type="text/css"&gt; &lt;!-- Contains all of the base rules, including the base mobile rules--&gt;
  &lt;link href="/themes/MyTheme/theme.min.css" rel="stylesheet" type="text/css"&gt; &lt;!-- Contains all of the theme specific overrides--&gt;
  </code></pre>
  
  <p>In the <code>base.min.css</code> I have these rules:</p>
  
  <pre><code>@media all and (max-width: 800px) {
  ....
  #menu {
  position: relative;
  width: 100%;
  min-height: auto;
  margin: 0px;
  padding: 0px;
  top: 0px;
  right: 0px;
  text-align: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-top-width: 1px;
  border-top-style: solid;
  background-image: none;
  }
  ....
  </code></pre>
  
  <p>Then in <code>theme.min.css</code> file, which comes after in the HTML file, I have these rules</p>
  
  <pre><code>....
  #menu {
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
  min-height: 320px;
  width: 300px;
  box-shadow: 0 0 5px #000000;
  position: relative;
  margin: -20px 0 0 0;
  z-index: 100;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-image: url(/themes/global/images/watermarks/watermark9.png);
  }
  ....
  </code></pre>
  
  <p>Note that the second set of rules are not contained within a media query. Despite this, most of the rules in it are overriding the previous rules. The height, width, background image, etc. I assumed that the media query ones would have priority if everything else was equal (despite coming later) due to increased specificity.  I mean, I could slap a bunch of <code>!important;</code> on there if I need to, but that seems like a bandaid, not a solution. </p>