viewportの設定について

viewportの設定について質問です。

現在、webサイト制作してまして、モバイル全体 → タブレット768px以上 → pc用1024pxといった順序で作成しています。
そこで質問なのですが、クローム検証とviewportのブレイクポイントが一致しません。

イメージとして下記の画像のような状態です。

これは自分のstylesheetの記述が原因なのでしょうか？

長文になってしまうのですがコードも載せておきます。

@charset "utf-8";
html,body,h1,h2,h3,h4,dl,dt,dd,ul,li,p{
    padding: 0;
    margin: 0;
    line-height: 1.5;
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
/*font-size*/
html{font-size:62.5%;} /*10px*/
body{
 font-size:16px;
 font-size:1.6rem;}/*16px*/
h1 {
 font-size: 32px;
 font-size: 3.2rem;
}
h2 {
 font-size: 24px;
 font-size: 2.4rem;
  padding:12px 0;
  background-color: #f6f6f6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
h3 {
 font-size: 20px;
 font-size: 2.0rem;
  border-bottom: 3px dotted gray;
  padding:12px 0;
}
h4 {
 font-size: 18px;
 font-size: 1.8rem;
  padding:12px 0;
}
p {
 font-size: 16px;
 font-size: 1.6rem;
}

img{ 
 width:100%;
}

html {
    font-size: 62.5%;
}/*=10px*/
body {
    font-size: 16px;
    font-size: 1.6rem;
    position:relative;
} /*16px*/

header,#navi,#contents,#petHotel,#access,footer
{width:100%;}

#container{
 width:90%;
 margin:0 auto;
}

/*header*/
header{
 text-align:center;
 padding-top:24px;
 background:url(../img/bg_color2.jpg);
 }
.h1_logo{
 width:30%;
 height:30%;
}
#header_wrapper2{
 padding:24px 0;
}
p.title{
 font-size:2em;
 font-weight:bold;
 margin-bottom:12px ;
 font-family:'Hiragino Maru Gothic Pro';
}
#info_header{
 display:none;
}

/*navi*/
ul{list-style:none;}
a{text-decoration:none;}
#navi{
 overflow:hidden;
 margin-bottom:30px;
 background: -webkit-linear-gradient
 ( 0%,#64F0F0 50%,#C1EDEF 51%,#32EAEA 100%)
}
#navi ul li{
 width:50%;
 float:left;
 border-left:3px solid #fff;
 border-bottom:3px solid #fff;
 box-sizing:border-box;
 background: -webkit-linear-gradient(
    top,
    #ebf6f7 0%,
    #C1EDEF 49%,
    #C1EDEF 51%,
    #4FEDED 100%
  );
}

#navi ul li a{
 display:block;
 padding:12px 0;
 text-align:center;
 white-space:nowrap;
 color:black;
 text-shadow:0 1px 0 gray;
}
#navi li a:hover{opacity:0.5;}

/*#contents*/
#contents{
 overflow:hidden;
 width:90%;
 margin:0 auto;
 text-align:center;
}
#contents > h3{margin:12px 0;}
#contents .topimg{
 float:right;
 margin-bottom:12px;
}
p.contents_main{
 margin-bottom:12px;
 text-indent:1em;
 text-align:left;
}
p.contents_indent{
 text-indent:1em;
 text-align:left;
}

/*#content_wrapper*/
#contents_wrapper{
 overflow:hidden;
 margin-bottom:24px;
}

/*.contents_box1{
  width:420px;
  float:left;
  overflow:hidden;
}
.contents_box2{
 width:420px;
 float:right;
 overflow:hidden;
}*/

/*料金表 #price*/
#price{
 width:90%;
 margin:0 auto;
 text-align:center;
}
#price>h2{margin-bottom:24px;}
/*#trimming*/
.trimming_table{
 width:100%;
 height:30px;
 line-height:3.0;
 margin:0 auto;
 margin-bottom:30px;
}
.trimming_table .status1{
 background:#b0f6f6;
} 
.trimming_table .status2{
 background:#ecf9fa;
}
.option_table .status1{
 background:#b0f6f6;
}
.hotel_table .status1{
 background:#b0f6f6;
}
caption{
 font-weight:bold;
 font-size:1.2em;
}

/*#wrapper*/
#trimming_wrapper{
 overflow:hidden;
 width:100%;
 margin:0 auto;
 margin-bottom:30px;
}
/*#option*/
.option_table{
 width:100%;
 height:30px;
 line-height:3.0;
}
/*hotel*/
.hotel_table{
 width:100%;
 height:30px;
 line-height:3.0;
 float:right;
}

/*#pethotel*/
#petHotel{
 overflow:hidden;
 text-align:center;
 width:90%;
 margin:0 auto;
 margin-bottom:30px;
}
#petHotel>h3{margin-bottom:12px;}
#petHotel .Hotel_img{
 margin-bottom:12px;
}
#petHotel_wrapper{
 overflow:hidden;
}
#petHotel img{
 float:right;
 margin-left:15px;
}
#petHotel_wrapper>p{text-align:left;}
#petHotel>ul li{
 text-align:left;
 line-height:2.5;
 }
.anchor_price{
 font-weight:bold;
 color:black;
 padding:6px;
 background:#b0f6f6;
}
.anchor_price:hover{
 color:pink;
}

/*#access*/
#access{
 width:90%;
 text-align:center;
 margin:0 auto;
 margin-bottom:24px;
}
#access_wrapper{
 overflow:hidden;
 width:100%;
}
.access_local{
 width:100%;
 float:right;
}
.access_local>dl>dt{
 background:#ffd4e9;
 font-weight:bold;
 padding:20px 0;
 padding-right:20px;
}
.access_local>dl>dd{
 padding:20px 0;
}
.gmap{
 float:left;
}

/*topへ戻る*/
#pageTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*footer*/
footer{
 width:100%;
 overflow:hidden;
 background:url(../img/bg_color2.jpg);
}
#footer_wrapper{
 width:80%;
 margin:0 auto;
 padding:24px 0;
 overflow:hidden;
}
footer ul li{
 width:25%;
 float:left;
 border-right:1px solid gray;
 box-sizing:border-box;
}
footer ul li:last-child{
 border-right:none;
}
footer ul li a{
 font-size:0.9em;
 display:block;
 text-align:center;
 color:black;
 text-shadow:0 1px 0 gray;
}
footer li a:hover{opacity:0.5;}
footer>p{
 text-align:center;
 }

@media screen and (min-width: 768px){
 #navi,#contents,#petHotel,#access,footer{
  text-align:left;
 }
 /*font*/
 h2{padding-left:6px;}
 /*navi*/
 #navi ul li{
  width:25%;
 }
 /*header*/
 .h1_logo{
 width:20%;
 height:20%;
}
/*#access*/
.access_local dl{
 width:100%;
}
.access_local>dl>dt{
 float:left;
 clear:left;
 background:none;
 border-bottom:1px dotted gray;
 width:20%;
 padding-right:0;
}
.access_local>dl>dd{
 border-bottom:1px dotted gray;
 float:right;
 width:80%;
}
.gmap{
 float:left;
}


/*footer*/
footer p{
 text-align:center;
 }
}

@media screen and (min-width: 1024px){
 #container{
  width:1024px;
 }
}

分かる方いましたらよろしくお願いします。