麻烦老师帮我看下最下面为什么会多出一段灰色呢

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>整体网页效果</title>
    <style type="text/css">
        *{
            margin:0;padding:0;
            list-style-type:none;
            text-decoration:none;
        }
        /*头部部分*/
        .header{
            width: 100%;
            height: 80px;
            background:#07cbc9;
            border-top:1px solid blue;
            position: fixed;
            top: 0;
            margin:0 auto;
        }
        .header img{
            width: 300px;
            height: 60px;
            padding-left:100px;
            padding-top: 10px;
        }
        .header ul {
            float: right;
            padding-right:100px;
        }
        .header ul li{
            float: left;
            width: 80px;
            height: 80px;
            line-height: 80px;
            font-size:13px;
            font-weight: bolder;
        }
        .header ul li a{
            color:white;
        }
        .header:hover{
            background:orange;
        }
        /*banner图*/
        .main .banner{
            width: 100%;
            height: 600px;
        }
        .main .banner img{
            width: 100%;
            height: 600px;
        }
        .main .banner .topLayer{
            position:absolute;
            top: 80px;
            left: 0;
            width: 100%;
            height: 600px;
            background: #000;
            /*图片透明度*/
            opacity: 0.5;
        }
/*        .main .banner .topLayer-form{
            width: 500px;
            height: 300px;
            background: blue;
            position: absolute;
            top: 380px;
            margin-top:-150px;
        }*/
    </style>
</head>
<body>
    <!-- 头部部分 -->
    <div class="header">
        <a href="#"><img src="images/logo.png"></a>
        <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="#">CONTACT</a></li>
        </ul>
    </div>
    <!-- 主体部分 -->
    <div class="main">
        <!-- banner图 -->
        <div class="banner">
            <img src="images/banner3.jpg">
            <!-- 遮罩层 -->
            <div class="topLayer"></div>
            <!-- banner里面的表单 -->
            <!-- <div class="topLayer-form">
                <form>
                    <input type="text" name="username" class="form1" placeholder="your Name">
                    <input type="text" name="phone" class="form2" placeholder="your Phone">
                    <input type="text" name="email" class="form3" placeholder="your Email">
                    <textarea class="form4" placeholder="Write Your Comment Here"></textarea>
                    <input type="subit" name="sbt" class="form5" value="SEND MESSAGE">
                </form>
            </div> -->
        </div>
        <!-- ABOUT区 -->
        <div class="about"></div>
        <!-- GALLERY区 -->
        <div class="gallery"></div>
    </div>
    <!-- 底部部分 -->
    <div class="footer"></div>
</body>
</html>

张凤梅 2020-01-04

源自：项目：网页布局案例 2-3 主体上面的图片