老师，我在缩小浏览器页面发现出现这样的问题

重点在页脚为什么宽度没有填充浏览器

<div class="footer">
    &copy 2016 imooc.com 京ICP备13046642号
</div>

.footer{
    text-align: center;
    line-height:80px;
    color:#fff;
}

页头的代码

/* 公共 */
body{
   font: 16px Microsoft YaHei UI;
   width: 1700px;
}
.header,
.footer{
   background: #07cbc9;
   height: 80px;
   width: 100%;
}
/* 头部 */
.header{
   position:fixed;
   z-index: 10;
}
.header .logo{
   float:left;
   display: block;
   width: 300px;
   height: 80px;
   margin-top:16px;
   margin-left: 100px;
}
.header ul{
   float: right;
   margin-right:100px;
}
.header ul li{
   display: block;
   float: left;
   line-height:80px;
   margin-right: 20px;
   font-weight:bold;
}
.header a:hover{
   color: orange;
}

<div class="header">
        <div class="logo">
            <a href="#"><img src="images/logo.png"></a>
        </div>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">FACULTY</a></li>
            <li><a href="#">EVENTS</a></li>
            <li><a href="#">CONTCAT</a></li>
        </ul>
    </div>

所以遇到这样的问题应该是哪里出问题了？