Why does it not work properly media query?

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; }