Width exceeding past 100% - html

Question

I am not sure why, but whenever I scale the following to a viewport of under 640px, the width exceeds past 100%. I have the set the bodies width to 100% and even tried max-width: 100%.
Does anyone see what is causing this to happen?
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 640 ) {
$('ul.nav_list').removeAttr('style');
}
});
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;
<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">
<li>Home</li>
<li>Spray Foam Insulation</li>
<li>Portable Spray Foam Kits</li>
<li>Polyurea</li>
<li>Personal Protective Equipment</li>
<li>Financing</li>
<li>Contact us</li>
</ul>