I feel stupid asking this but this is a very simple problem that don't understand how to solve. In the code below, why are the container, main, and secondary divs extending beyond the header? I understand that it's occurring because of the padding I've assigned to the container but I've assigned a max-width to the html element. The header element is obeying that maximum width but the container and its child divs aren't. I've looked at similar questions here but didn't see anything that I thought pertained to my particular situation. What's going on here?
Thanks.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="../reset.css" />
<style type="text/css">
html {
max-width: 960px;
margin: 0 auto;
position: relative;
}
header {
height: 2.5em;
background: #2a3744;
color: #fff;
}
body {
font-size: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
padding: 1em;
margin: 0 auto;
background: #ccc;
}
.main { background: #cf6; }
.secondary { background: #fc6; }
</style>
</head>
<body>
<header role="banner">
header
</header>
<div class="container">
<div class="main">
main
</div>
<div class="secondary">
secondary
</div>
</div>
</body>
</html>
