title: CSS Media Query Hierarchy - Why Doesn't "Smaller" Media Query Render in Browser / Inspector?
body: <p>I have several media queries, but there are two that I'm trying to use to style a certain element:</p>
  
  <p><code>.navbar-default .navbar-nav&gt;li&gt;a</code></p>
  
  <p>Here is my CSS including previous media queries:</p>
  
  <pre><code>@media (min-width: 1024px) {
  
       .header-column-secondary {
      width: 13%;
      }
  }
  
  @media (min-width: 768px) {
  
      #gatewaylogo {
      height: 85px;
      padding-left: 0px;
      padding-top: 10px;
      }
  
      .phone-number {
      font-family: 'Oswald', sans-serif;
      color: #ffffff;
      font-size: 16px;
      position: relative;
      }
  
      .social-media {
      color: #ffffff;
      display: table-cell;
      padding: 5px 0 5px 5px;
      transform: translateY(-7%);
      }
  }
  
  @media screen and (max-width: 1024px) {
      .navbar-default .navbar-nav&gt;li&gt;a 
      {
      font-family: 'Oswald', sans-serif;
      color: #1B3764;
      text-transform: uppercase;
      font-size: 22px;
      line-height: 100px;
      margin-right: 60px;
      padding-left: 0;
      padding-right: 0;
      }
  }
  
  @media screen and (max-width: 768px) {
      .navbar-default .navbar-nav&gt;li&gt;a {
      font-family: 'Oswald', sans-serif;
      color: #1B3764;
      text-transform: uppercase;
      font-size: 22px;
      line-height: 100px;
      margin-right: 20px;
      padding-left: 0;
      padding-right: 0;
      }
   }
  </code></pre>
  
  <p>You can see that the media queries that are applying to <code>.navbar-default .navbar-nav&gt;li&gt;a</code> are <code>(max-width: 1024px)</code> and <code>(max-width: 768px)</code></p>
  
  <p>The idea is that from 1024px - 769px, I want <code>.navbar-default .navbar-nav&gt;li&gt;a</code> to get <code>margin-right: 60px</code>, and at 768px, tablet size, I want <code>.navbar-default .navbar-nav&gt;li&gt;a</code> to get <code>margin-right: 20px</code>. I plan on continuing to add media queries as the browser width gets smaller - 475px, 375px, and 320px. </p>
  
  <p><a href="https://i.stack.imgur.com/6s0WX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6s0WX.png" alt="enter image description here"></a></p>
  
  <p>So why is it that at 768px, the media query doesn't render? It seems that the media query for 1024px is still getting the style and overriding it. I don't want to add <code>!importants</code>, because then I will continue to have to add <code>!importants</code> all the way down to 320px. </p>
  
  <p>A problem is that I like to design from desktop to mobile - not mobile first. Any suggestions? The website is live here: <a href="http://nowordpress.gatewaywebdesign.com/" rel="nofollow noreferrer">http://nowordpress.gatewaywebdesign.com/</a></p>
  
  <p>Thanks</p>