Html 如何使我的css标题响应

我正在使用这个CSS：

#header-topbar {
    width:100%;
    height:120px;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    position: absolute;
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}

为了我的头球，我想让它有反应。我知道如何使用媒体查询，但我不确定css的其余部分

如何使logo div显示在顶部，居中，然后显示下面的文本

我在这里创建了一个提琴：这样您就可以看到html了

像这样谢谢你？ 不确定图像应该如何匹配

code

检查这个

在

#标题顶部栏中

为了便于在

媒体查询中操作

高度不应声明，
在

#logo

中，您的

位置：绝对位置

是否有原因？这就是为什么您的logo不会因为

绝对位置

显示在元素顶部而下降的原因之一

#header-topbar {
    float:left;
    width:100%;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}
#logo img {
    max-width:100%;
    width:100%;
}
@media handheld, screen and (max-width: 620px){
    #logo{
        width:70%;
        float:none;
        margin-left:auto;
        margin-right:auto;
    }
    #header-right-content {
        float:left;
        width:100%;
        text-align:center;
    }

}

希望这对你有帮助