.footer ul{ text-align:center; } 请问为什么底部不居中？

<!DOCTYPE html>
<html>
<head>
    <title>两列布局</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            font-family:"微软雅黑";
            color:red;
        }
        .header{
            width:100%;
            height:100px;
            background-color:black;
            position:fixed;        
            top:0;    
        }
        li{
            list-style:none;
        }
        .logo{float:left;}
        .nav ul{
            float:right;
        }
        .nav ul li{
            float:left;
            line-height:100px;
            color:white;
            font-size:18px;
            margin-right:40px;
        }
        .content{
            width:100%;
            height:800px;
            margin-top:100px;
            background:#ADD8E6;
        }
        .footer{
            text-align:center;
            position:fixed;
            bottom:0;
            height:100px;
            width:100%;
            background-color:black;
            line-height:100px;
        }
        .footer ul{
            text-align:center;
        }
        .footer ul li{
            float:left;
            margin-right:60px;
            color: white;
        }
        .right{
            float:right;
            margin-right:150px;
            margin-top:150px;
        }
        .right h1{
            color:black;
            text-align:center;
        }
        .right ul li{
            font-size:18px;
            line-height:18px;
            margin-top:18px;
        }

        .left{
            float:left;
            padding-left:150px;
            margin-top:150px;
        }
        .left h1{
            color:black;
            text-align:center;
        }
        .left ul li{
            font-size:18px;
            line-height:18px;
            margin-top:18px;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="logo">
        <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
    </div>
    <div class = "nav">
        <ul>
            <li>课程</li>
            <li>职业路径</li>
            <li>实战</li>
            <li>猿问</li>
            <li>手记</li>
        </ul>
    </div>
</div>
<div class = "content">
    <div class = "left">
        <h1>课程推荐</h1>
        <ul>
            <li><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</li>
            <li><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</li>
            <li><span>职业路径</span>&nbsp;&nbsp;ios基础语法与常用控件</li>
            <li><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</li>
            <li><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</li>
          </ul>
    </div>
    <div class = "right">
        <h1>相关课程</h1>
        <ul>
            <li>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript</li>
            <li>HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;Jquery</li>
            <li>移动端基础&nbsp;&nbsp;移动端APP开发</li>
          </ul>
    </div>
</div>
<div class = "footer">
    <ul>
        <li>网站首页</li>
        <li>网站合作</li>
        <li>人才招聘</li>
        <li>联系我们</li>
        <li>常见问题</li>
    </ul>
</div>
</body>
</html>

玖月日光微澜 2017-07-19

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