请老师帮看看我的图片向下滚动无效，并且nav和banner间有白色缝隙，如何解决

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{padding:0;
        margin:0;
    }
    .page{width:100%;
        height:1640px;
    }
    .head{width:100%;
        height:100px;
        background-color:black;
        position:fixed;
        top: 0;
    }
    .footer{width:100%;
        height:100px;
        background-color:black;
        position:fixed;
        bottom:0;
        line-height:100px;
        text-align:center;
    }
    .nav{float:right;
        line-height:100px;
        margin-right:5%;
    }
    li{display:inline;
        padding-left:22px;
        font:bold 16px 微软雅黑;
    }
    a{text-decoration:none;
        color:#fff;
    }
    .main{width:100%;
        height:auto;
    }
    .p1{width:1600px;
        height:480px;
        background:url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg) center top no-repeat;
    }
    .p2{width:1600px;
        height:480px;
        background:url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg) center top no-repeat;
    }
    .p3{width:1600px;
        height:480px;
        background:url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg) center top no-repeat;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="page">
    <div class="head">
        <a href="#"><img class="logo" src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>
        <div class="nav">
            <ul>
              <li><a href="#">课程</a></li>
              <li><a href="#">职业路径</a></li>
              <li><a href="#">实战</a></li>
              <li><a href="#">原文</a></li>
              <li><a href="#">手记</a></li>
            </ul>
        </div>
    <div class="main">
        <div class="p1"></div>
        <div class="p2"></div>
        <div class="p3"></div>
    </div>    
    <div class="footer">
        <ul>
              <li><a href="#">底部导航1</a></li>
              <li><a href="#">底部导航2</a></li>
              <li><a href="#">底部导航3</a></li>
              <li><a href="#">底部导航4</a></li>
              <li><a href="#">底部导航5</a></li>
              <li><a href="#">底部导航6</a></li>
        </ul>
    </div>
     
     
  </div>
</body>
</html>