如何使标题元素屏幕响应

Question

我正在做一个需要响应式设计的项目。我已经完成了大多数功能，但是对于小屏幕，屏幕响应媒体查询小于860px是不正确的。请参阅codepen

我只希望钟形钟向右浮动，并且始终与正确的位置相距16px。 Apple图标应始终位于中间。右侧的搜索浮动点距钟形点的距离为32px。我已经尝试过：

@media (max-width: 860px) {
header {
    margin : 0;
    padding: 0;
}
.menu-toggle {
    display: block;
    float: left;
    padding-left: 16px;
}
#logo {
    display: block;
    float: left;
    margin-left: 40%;
}
.nav-icon {
    display: absolute;
}
#search {
    display: block;
}
#bell{
    display: block;
}

但仍然不能很好地工作。

任何人都可以帮助改善媒体查询吗？非常感谢！