Media Queries use only biggest width

Question

i have problem with media queries that it always replace the biggest query idk why ! here is my code

@media screen and (max-width: 575px) {
     .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 25px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}

@media screen and (max-width: 768px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 35px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}
@media screen and (max-width: 992px) {

    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 55px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }

}

@media screen and (max-width: 1200px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 65px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}

i also have the viewport meta at my html

<meta name="viewport" content="width=device-width, initial-scale=1">

but at the browser it shows up like this :
"Note: browser width : 980"

enter image description here

thanks

Answer 1

Please put your media query order like this large to small

@media screen and (max-width: 1200px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 65px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}
@media screen and (max-width: 992px) {

    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 55px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }

}
@media screen and (max-width: 768px) {
    .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 35px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}
@media screen and (max-width: 575px) {
     .sectionHeader{
        color: #36260d;
        font-family: BebasNeue, Helvetica, Arial, sans-serif;
        font-size: 25px;
        letter-spacing: 20px;
        line-height: 55px;
        vertical-align: middle;
    }
}