麻烦老师看看这段代码，有没有需要优化的地方

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<meta charset="utf-8">
	<style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        .big{
            width: 1600px;
            height: 600px;
        }
        /*导航*/
        .header{
            width: 100%;
            height: 100px;
            background: black;
            position: fixed;
            top: 0;
        }
        .logo{
            background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;
            padding-left: 32px;
            width: 300px;
            height: 100px;
            vertical-align: middle;
        }
        .nav ul{
            list-style-type: none;
            display: inline;
            height: 50px;
            line-height: 50px;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -25px;
        }
        .nav ul li{
            color: white;
            float: left;
            padding-right: 66px;
        }
        /*内容*/
        .content{
            width: 100%;
            height: 400px;
            padding: 100px 10%;
            background: rgb(185,215,228);
            overflow: hidden;
            zoom:1;
        }
        p{
            margin: 10px 0;
            color: black;
        }
        p span{ margin-right: 20px;}
        .left{
            width: 30%;
            height: 100%;
            float: left;
            padding-top: 5%;
        }
        .left p span:nth-child(1){
            background: pink;
        }
        .right{
            width: 30%;
            height: 100%;
            float: left;
           
            padding-top: 5%;
            margin-left: 20%;
        }
       
        /*底部*/
        .footer{
            width: 100%;
            height: 100px;
            background: black;
            position: fixed;
            bottom: 0;
        }
        .footer ul{
            list-style-type: none;
            display: inline;
            height: 50px;
            line-height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -492px;  
        }
        .footer ul li{
            color: white;
            float: left;
            padding-right: 100px;
        }
	</style>
</head>
<body>
    <div>
        <div class="header">
           <div class="logo"></div>
           <div class="nav">
               <ul>
                   <li>课程</li>
                   <li>职业路径</li>
                   <li>实战</li>
                   <li>猿问</li>
                   <li>手记</li>
               </ul>
           </div>
        </div>
        <div class="content">
            <div class="left">
               <h2>课程推荐</h2>
               <p><span>职业路径</span><span>HTML5与CSS3实现动态网页</span></p>
               <p><span>职业路径</span><span>零基础入门Android语法与界面</span></p>
               <p><span>职业路径</span><span>iOS基础语法与常用控件</span></p>
               <p><span>职业路径</span><span>PHP入门开发</span></p>
               <p><span>职业路径</span><span>JAVA入门开发</span></p>
            </div>
            <div class="right">
                <h2>课程推荐</h2>
                <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
                <p><span>HTML5</span><span>CSS3</span><span>Jquery</span></p>
                <p><span>移动端基础</span><span>移动端APP开发</span></p>
            </div>
        </div>
        <div class="footer">
            <ul>
                   <li>网站首页</li>
                   <li>企业合作</li>
                   <li>人才招聘</li>
                   <li>联系我们</li>
                   <li>常见问题</li>
                   <li>友情链接</li>
               </ul>
        </div>
    </div>
</body>
</html>

同时我有个问题，当我设置了头部和底部定位为fixed时，头部和底部都已经脱离了自然流，当最外面的容器big高度为600px;时，我设置content容器的高度为400px; 同时设置margin-top和margin-bottom都为100px;为什么会距离顶部有空白间隙？

要开心鸭 2019-08-28

源自：CSS网页布局基础 2-10 编程练习