css媒体查询在谷歌浏览器上无法正常工作

Question

I am working on creating my website in php from a week or more all my media queries working properly as defined... @media screen and (max-width: 768px) @media screen and (max-width: 600px) ...But suddenly chrome stopped working properly and showing contents of 768px on the width of 960px, and on 750px instead of 600px. I have refreshed chrome again and again even cache, but no result. But EADGE is working fine. Is there any problem with chrome refreshing frequently during developing website or something else? Kindly help me in this weird situation.

@media screen and (max-width: 900px) { 
.side-btn{
    font-size: 100%;
    margin: 4px 5px;
    padding: 3% 3%;
}
}
@media screen and (max-width: 768px){
.nav1 ul li{
    clear: both; 
    width: 100%;
    border-right: none;     
    border-bottom: 1px solid grey;      
}
.nav2 {     display: block; }
.navul{     display: none;  }

}
@media screen and (max-width: 600px) {
.startmenu,.itemhead{   font-size: 100%;}
.side-btn{
    font-size: 80%;
    margin: 4px 3%;
    padding: 3% 3%;
}
.itbody{ height: 340px; }
.custom{
    margin-top: 3px;        
    width: 100%; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inqbasket{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}
.ifcol1{    width: 100%;    }
.ifcol2{    width: 100%;    }

}

Answer 1

I have found the mistake I'am making is that I have zoomed out my chrome browser to 67% that was cause the problem of width scaling. Now everything is working fine when I backed to 100% zoom.