title: Media Query Styles Not Overriding Original Styles
body: <p>I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?</p>
  <p><strong>ORIGINAL CSS</strong></p>
  <pre><code>#global-wrapper-outer &gt; #global-wrapper-inner {
      width: 85%;
      height: 100%;
      margin: 0 auto;
      position: relative;
  }
  #global-wrapper-outer &gt; #global-wrapper-inner &gt; nav {
      background: #fff;
      padding-bottom: 20px;
      box-shadow: 0 4px 2px -2px gray;
  }
  </code></pre>
  <p><strong>MEDIA QUERY CSS</strong></p>
  <pre><code>@media screen and (max-width:1024px) {
      #global-wrapper-outer &gt; #global-wrapper-inner {
          width: 100%;
      }
      #global-wrapper-outer &gt; #global-wrapper-inner &gt; nav {
          display: none;
      }
  }
  </code></pre>
  <p>The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of <code>#global-wrapper-inner</code> to <code>100%</code> it doesn't apply. I can see the style being &quot;applied&quot; when I press F12 and select that element. However, the style itself is crossed out and not <strong>actually</strong> applied and it still has the original width of <code>85%</code>.</p>