media query min-width not working

I am using media query, no matter the browser is below or over 1200px, the the css always detects my browser min-width is 768px.so the display in browser is always 750px.

maybe it's a easy problem but it bothered me few hours.

My HTML:

<div class="header_1">
            <div class="logo_1">
                <a href="Learn.html">
                    <img src="img/logo.svg">
                </a>
            </div>
            <div class="sign_in">
                <ul class="sign_list_1">
                    <li>Pricing</li>
                    <li>Sign in</li>
                </ul>
            </div>
</div>

My CSS:
@media (min-width: 1200px){
    .header_1{
        width: 1170px;
    }
}

@media (min-width: 992px){
.header_1{
    width:970px;}
}

@media (min-width: 768px){
.header_1{
        width: 750px;
    }
}

Solution

Try reversing the order of your media queries. The last rule (768px) overrides the others because it is last and has equal precedence to the others.