title: Media query being called when screen bigger
body: <p>I've been asked to do some tweaks in Wordpress for a friend, one of which is adding a little flowery flourish to his site. This was all going well until I encountered some media query problems. </p>
  
  <p>When I put the queries in, to change the width of an element, they're all showing up in the inspector, but only the second one is being used - even though the max-width is smaller than the current screen size. It's like the code is being overwritten just like it would usually be if it weren't in a media query.</p>
  
  <p><a href="https://i.stack.imgur.com/zK97g.jpg" rel="nofollow noreferrer">Screenshot showing code, website with current screen size and inspector indicating current styles</a></p>
  
  <p>I've put it through a validator to check that I wrote it right, have tried adding 'screen' to the query and adding 'min-width' to it too. So far, nothing is working. I'm sure it must be something silly I'm missing, any ideas?</p>
  
  <pre><code>@media screen and (max-width: 1199px) {
      #section-home-inner::before {
           width: 80%;
      }
  
      #section-home-inner::after {
          width: 80%;
      }
  }
  
  @media screen and (max-width: 868px) {
      #logo img {
          max-height: 99px;
      }
  
      #section-home-inner::before {
          width: 100%;
          margin-left: -230px;
      }
  
      #section-home-inner::after {
          width: 100%;
          margin-left: -230px;
      }
  }
  </code></pre>