页眉部分的响应式布局效果我做不出来，请老师给看一下我的代码哪里有问题

<div class="header">
        <div class="logo">
            <img src="图片/logo.png">
        </div>

        <div class="menu" onmouseleave="menu_show1()">
            <div class="menu_title" onclick="menu_show()">
                <a href="#">内容分类</a>
            </div>
            <ul id="menu1">
                <li>现实主义</a></li>
                <li>抽象主义</li>
            </ul>
        </div>

        <div class="auth">
            <ul>
                <li><a href="#">登陆</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="banner">
            <img src="图片/welcome.png" class="banner-img">
        </div>
    </div>
    <div class="footer"></div>

/*初始化布局*/
*{
    padding: 0px;
    margin:0px;
}

.header{
    margin:25px auto;
    width: 1200px;
}

.header .menu ul{
    width: 80px;
    display: none;
    padding: 0px;
    position: absolute;
    background-color: white;
    opacity: 0.5;
}

.header .logo{
    float: left;
    position: relative;
}

.header .menu{
    float: left;
    position: relative;
    top: 12px;
    left: 16px;
}

a{
    text-decoration: none;
}

.header .menu .menu_title{
    padding-bottom: 5px;
    border-bottom: 1px solid purple;
    width: 80px;
    text-align: center;
}

.header .menu ul li{
    list-style-type: none;
    margin-top: 15px;
    text-align: center;
}

.header .auth ul li{
    list-style: none;
    float: right;
    margin-right: 50px;
    margin-top: 13.3px;

}
/*.header .menu:hover ul{
    display: block;
}*/s

.content{
    margin:25px auto;
    width: 1200px;
}

.content .banner .banner-img{
    margin-top: 3px;
}