为什么我设置wrap的宽度没有被子元素继承
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width:100%
height:400px;
border:2px solid #CCC;
background-image:url(./background.png) no-repeat;
}
img{
margin:10px 15px;
border:2px solid #CCC;
}
#header{
width:100%;
height:200px;
border:1px solid red;
}
#mainbody{
width:100%;
border:1px solid blue;
}
#footer{
width:100%;
height:200px;
border:1px solid black;
}
.wrap{
width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="mainbody">
<div class="box">
<img src="./images/1.jpg" width="200px" height="300px" />
<img src="./images/2.jpg" width="200px" height="300px"/>
<img src="./images/3.jpg" width="200px" height="300px"/>
<img src="./images/4.jpg" width="200px" height="300px"/>
<img src="./images/5.jpg" width="200px" height="300px"/>
</div>
</div>
<!--div ul li dl dt p
a img span strong em input-->
<div id="footer"></div>
</div>
</body>
</html>
求大神指导，谢谢
