宽度超过100％

Question

我不知道为什么，但每当我将以下内容缩放到640px以下的视口时，宽度超过100％。我将body的宽度设置为100％，甚至尝试了max-width: 100%。

有谁看到导致这种情况发生的原因？

＆＃13;

＆＃13;

$('span.nav-btn').click(function () {
		$('ul.nav_list').slideToggle(500);
	})
	$(window).resize(function (){
		if ( $(window).width() > 640 ) {
			$('ul.nav_list').removeAttr('style');
		}
	});

＆＃13;

body {
		padding: 0;
		margin: 0;
		max-width: 100%;
    background: green;
	}
.header {
  margin: 0;
  background-color: #333;
  height: 80px;
}

.header_wrap {
  /*margin: 0 15%;*/
  width: 960px;
  text-align: center;
}
.nav-btn {
  display: none;
}
.nav_list {
  text-decoration: none;
  background-color: #333;
  color: #FFF;
  margin: 0;
  list-style: none;
  width: 100%;
}

.nav_list > a {
  display: inline-block;
  padding: 25px 12px;
  text-decoration: none;
}

.nav_list > a > li {
  text-decoration: none;
  font-size: 1em;
  color: #FFF;
}


@media screen and (max-width:640px) {
		body {
			background: blue;
		}
		.header_wrap {
			margin: 0%;
		}
		.nav_list {
			padding: 0;
			text-align: center;
			display: none;
			margin-top: 60px;
			width: 100%;
		}
		.nav_list > a {
			display: block;
			border-bottom: 1px solid #FFF;
			width: auto;
		}
		.nav-btn {
			display: block;
			background-color: #333;
			color: #FFF;
			font-size: 1.5em;
			text-align: right;
			cursor: pointer;
			padding-top: 20px;
		}
		.nav-btn:before {
			background-image: url('http://optimumwebdesigns.com/icons/mobile_menu_white.png');
			background-size: 28px 28px;
			background-repeat: no-repeat;
			width: 28px;
			height: 28px;
			content:"";
			display: block;
		

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
  <div class="header_wrap">
  <span class="nav-btn"></span>
    <ul class="nav_list">
      <a href="index.html"><li>Home</li></a>
      <a href="Spray-Foam-Insulation-Material-Suppliers.html"><li>Spray Foam Insulation</li></a>
      <a href="Portable-Spray-Foam-Kits.html"><li>Portable Spray Foam Kits</li></a>
      <a href="Polyurea.html"><li>Polyurea</li></a>
      <a href="Personal-protective-equipment.html"><li>Personal Protective Equipment</li></a>
      <a href="Spray-Foam-Equipment-Financing.html"><li>Financing</li></a>
      <a href="Contact-us.html"><li>Contact us</li></a>
    </ul>

＆＃13;

＆＃13;

＆＃13;