title: CSS style being crossed out because of media query?
body: <p>So in this little fiddle I made, I'm trying to change the max-height to 20em when <code>.menuToggle</code> is clicked, I'm doing this by toggling a class. The class gets toggled but in chrome developer tools the style is crossed out. I'm assuming this has something to do with the media query but not entirely sure.</p>
  
  <p>Any help would be greatly appreciated, thanks :).
  <a href="https://jsfiddle.net/kakbxak0/" rel="nofollow noreferrer">https://jsfiddle.net/kakbxak0/</a></p>
  
  <pre><code>@media screen and max-width 1024px{
    .navBar ul li {
      box-sizing:border-box;
      width:100%;
      text-align:center;
      padding:15px;
    }
  
    .navBar&gt;ul {
      max-height:0;
    }
  
    .showing {
     max-height:20em;
    }
  
    header {
     text-align:center;
    }
  
    .menuToggle {
      display:block;
    }
  }
  </code></pre>