请老师帮我看看我代码的问题，谢谢

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    /*此处写代码*/

    * {
        padding: 0;
        margin: 0;
    }

    body {
        min-width: 900px;
    }

    .contarner {
        padding: 0 200px 0 220px;
    }

    .middle,
    .right,
    .left {
        position: relative;
        min-height: 300px;
        float: left;
    }

    .head {
        float: left;
        background-color: black;
        width: 100%;
        height: 100px;
        color: white;
        line-height: 100px;
    }

    .foot {
        float: left;
        background-color: black;
        width: 100%;
        height: 100px;
        color: white;
        line-height: 100px;
        text-align: center;
    }

    .middle {
        width: 100%;
        background-color: #FFC0CB;
    }

    .left {
        width: 220px;
        background-color: #FFDBEF;
        margin-left: -100%;
        left: -220px;
        height: 404px;
    }

    .right {
        width: 200px;
        background-color: #B0D8E6;
        margin-left: -200px;
        right: -200px;
        height: 404px;
    }

    .head img {
        float: left;
        width: 300px;
        height: 100px;
    }

    .head ul li {
        list-style-type: none;
        color: white;
        float: right;
        margin-left: 20px;
    }

    .orange:hover {
        color: orange;
    }

    .foot ul li {
        list-style-type: none;
        color: white;
        float: left;
        margin: 0 54px;
    }

    .foot ul {
        margin: 0 200px;
        /**感觉底部有问题 不够居中 希望老师帮我看看**/
        height: 100px;
        font-size: 20px;
    }

    .middle img {
        width: 400px;
        height: 300px;
        margin: 50px 350px 50px 350px;
        background-clip: content-box;
    }

    .contarner_left {
        margin: 100px 0px 150px 50px;
    }


    li span {
        background-color: #B56A6C;
    }

    .contarner_left ul li {
        font-size: 8px;
        list-style-type: none;
        margin-top: 10px;
    }

    .contarner_right {
        margin: 50px 0px 150px 10px;
    }

    input {
        width: 180px;
        height: 30px;
        margin: 20px 10px 20px 0px;
    }

    input:nth-child(3) {
        background-color: red;
        color: white;
    }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="head">
        <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
        <ul>
            <li><a class="orange">手记</li>
            <li><a class="orange">猿问</li>
            <li><a class="orange">实战</li>
            <li><a class="orange">职业路径</li>
            <li><a class="orange">课程</li>
        </ul>
    </div>
    <div class="contarner">
        <div class="middle"><img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"></div>
        <div class="left">
            <div class="contarner_left">
                <ul>课程推荐
                    <li><span>职业路径</span>HTML5与CSS3实现动态网页布局</li>
                    <li><span>职业路径</span>零基础入门Android语法与界面</li>
                    <li><span>职业路径</span>iOS基础语法与常用控件</li>
                    <li><span>职业路径</span>PHP入门开发</li>
                    <li><span>职业路径</span>JAVA入门开发</li>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="contarner_right">
                <form>登录
                    <input type="text" name="usename" placeholder="请输入登陆邮箱/手机号">
                    <input type="password" name="usename" placeholder="6~16位密码，区分大小写，不能用空格">
                    <input type="submit" name="tj" value="登录">
                </form>
            </div>
        </div>
    </div>
    <div class=" foot ">
        <ul>
            <li>网站首页</li>
            <li>企业合作</li>
            <li>人才招聘</li>
            <li>联系我们</li>
            <li>常见问题</li>
            <li>友情链接</li>
        </ul>
    </div>
</body>

</html>

AiChiRol 2018-03-07

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