title: CSS: max-width for @media query not working
body: <p>(It works on other browsers but not chrome)</p>
  
  <p>I want to apply a style only when the browser size is less than 1400px</p>
  
  <p>with <code>max-width</code> not working</p>
  
  <pre><code>@media only screen and (max-width:1400px)  {
  .heading-left {
      left: -0.5%;
    }
  }
  </code></pre>
  
  <p>with <code>min-width</code> its working </p>
  
  <pre><code>@media only screen and (min-width:480px)  {
  .heading-left {
      left: -0.5%;
     }
  }
  </code></pre>
  
  <p>But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)</p>
  
  <p>Fiddle for this</p>
  
  <p><a href="https://jsfiddle.net/j4Laddtk/" rel="noreferrer">https://jsfiddle.net/j4Laddtk/</a></p>