title: css media query not working properly on google chrome
body: <p>I am working on creating my website in php from a week or more all my media queries working properly as defined...
  <strong>@media screen and (max-width: 768px)</strong>
  <strong>@media screen and (max-width: 600px)</strong>
  ...But suddenly chrome stopped working properly and showing contents of <strong>768px</strong> on the width of <strong><em>960px</em></strong>, and on <strong><em>750px</em></strong> instead of <strong><em>600px</em></strong>.
  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. </p>
  
  <pre><code>@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%;    }
  
  }
  </code></pre>