Why does it not work properly media query? - css

Question

When I write max-width(1220px) it works when width is 1300px and when I write second breakpoint 1150px now from 1300px works only 1150px and ignored 1220px
HTML CODE
<div class="container">
<div class="inner">
<div class="left">arrow left</div>
<div class="right">arrow right</div>
</div>
</div>
STYLE CODE
.container {
width: 1600px;
margin: auto;
}
.inner {
position: relative;
}
.left,
.right {
position: absolute;
}
.left {
left: -50px
}
.right {
left: 300px
}
#media (max-width: 1220px) {
.right {
left: 250px
}
}
#media (max-width: 1150px) {
.right {
left: 210px
}
}
you can see the image description here
https://i.stack.imgur.com/7viiX.jpg

Answer 1

max-width: 1220px media query applies on devices with the width of 1220px or smaller, same thing happens for max-width: 1150.
This is what should happen in your code with both breakpoints:
When device width greater than 1220px --> .right { left: 300px; }
When device width smaller than 1220px and greater than 1150px --> .right { left: 250px; }
when device width is smaller than 1150px --> .right { left: 210px; }