title: My last Media Query isn't being used
body: <p>Why is the last media query not working here? Am I over looking something? I have tried changing the order but it always leaves out the last one for some reason. This appears to be the correct cascading order to me. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (min-width: 768px) {
    .mobileBrand {
      display: none;
    }
  }
  @media screen and (max-width: 767px) {
    .desktopBrand {
      display: none;
    }
  }
  @media screen and (max-width: 1079px) {
    .nav-right {
      margin-left: 1em;
    }
  }
  @media screen and (max-width: 1106px) {
    .nav-right {
      margin-left: 6em;
    }
  }</code></pre>
  </div>
  </div>
  </p>