Question: (It works on other browsers but not chrome)

I want to apply a style only when the browser size is less than 1400px

with `max-width` not working

```
@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

```

with `min-width` its working 

```
@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

```

But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)

Fiddle for this

<https://jsfiddle.net/j4Laddtk/>

Answer: 
Is your **browser** `zoom`-ed at different than `100%` level ? If so, zoom to `100%` (`Ctrl+MouseWheel`)
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.

If you have

```
.container {
  color: white;
}

```

and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.

```
.container {
  color: white;
}

@media only screen and (max-width: 600px) {
  .container {
    color: pink;
  }
}

```

So if your media queries are at the top the default colour of white will override the media query for pink.