title: On of @media queries gets skipped
body: <p><strong>EDIT</strong> I have actually fixed the issue by recreating the bootstrap grid inside of the HTML, removing the need for the most media queries created. Thanks for all your help all!</p>
  <p>I've run into a problem and can't seem to find the issue.</p>
  <p>I have a project running on my web server, and all the media queries work except for one. It seems to skip over. It is shown in inspect element, I also validated the CSS which doesnt seem to find any errors, I also have the META Tag in my index.</p>
  <p>The <code>@media screen and (max-width:1199px) {...}</code>  isn't working.</p>
  <p>I hope you can help me get out of this problem, thanks!</p>
  <p>Here's the CSS:</p>
  <pre><code>@media screen and (max-width: 1319px) {
    .release-title {
      margin-left:30px;
    }
    .release-desc {
      margin-left:30px;
    }
  
    .trend-ct .title {
      margin-left:30px;
    }
  
    .trend-ct .desc {
      margin-left:30px;
    }
  
    .newshoe-title {
      margin-left:30px;
    }
  
    .newshoe-desc {
      margin-left:30px;
    }
  }
  
  @media screen and (max-width: 1199px) {
    .geeks {
      height:600px;
    }
  
    .img-title {
      padding-top:5px;
    }
  
    .launch-title {
      margin-top:-10px;
    }
    .release-title {
      margin-left:30px;
      margin-top:10px;
    }
  
    .release-desc {
      margin-left:30px;
    }
  
    .trend-ct .title {
      margin-top:10px;
      margin-left:30px;
    }
  
    .trend-ct .desc {
      margin-left:30px;
    }
  
    .trend-ct {
      height:480px;
    }
  
    .trend-ct .desc:hover {
      margin-left:60px;
    }
  
    .newshoe-title {
      margin-top:10px;
      margin-left:30px;
    }
  
    .newshoe-desc {
      margin-left:30px;
    }
  
    .subbox {
      margin-top:-50px;
    }
  
    .footer {
      height:400px;
    }
  }
  
  @media screen and (max-width: 1090px) {
    .geeks {
      height:100px;
    }
  
    .img-title {
      padding-top:5px;
    }
  
    .launch-title {
      margin-top:20px;
    }
    .release-title {
      margin-left:110px;
      margin-top:-100px;
    }
  
    .release-desc {
      margin-left:110px;
    }
  
    .trend-ct .title {
      margin-top:-110px;
      margin-left:110px;
    }
  
    .trend-ct .desc {
      margin-left:110px;
    }
  
    .trend-ct {
      height:800px;
    }
  
    .trend-ct .desc:hover {
      margin-left:165px;
    }
  
    .newshoe-title {
      margin-top:-110px;
      margin-left:110px;
    }
  
    .newshoe-desc {
      margin-left:110px;
    }
  
    .subbox {
      margin-top:-325px;
    }
  
    .footer {
      height:830px;
    }
  }
  
  @media screen and (max-width: 844px) {
    .between-ct {
      height:800px;
    }
  
    .subbox {
      margin-top:50px;
      float:left;
    }
  
    .nav-link{
      display:block;
      width:100%;
      padding:20px;
      font-size:21px;
      font-weight:normal;
    }
  }
  
  @media screen and (max-width: 813px) {
    .lookup {
      width:15%;
    }
  }
  
  @media screen and (max-width: 538px) {
    .lookup {
      width:20%;
    }
  }
  
  @media screen and (max-width: 445px) {
    .lookup {
      font-size:13px;
      top:-2px;
    }
  
    .subbox {
      width:100%;
    }
  }
  
  @media screen and (max-width: 403px) {
    .between-ct {
      height:850px;
    }
  
    .lookup {
      width:25%;
    }
  }
  </code></pre>
  <p>Here's my META Tag in the header:
  <code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</code></p>