html - 中心徽标不重叠导航菜单

我的网站使用的导航菜单保持左对齐。我想在导航栏上添加一个徽标，使其保持居中，但在减小屏幕尺寸时，该徽标不会与菜单重叠。

找不到任何有用的资源，所以这是我当前的代码减去样式：

<nav>
    <div class="menu">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="logo"><a href="#"><img src="images/logo.png"></a></div>
</nav>

nav {
    width: 100%;
    height: 50px;
    position: absolute;
    line-height: 50px;
}

.menu {
    margin-right: auto;
}

.menu div {
    display: inline-block;
}

.logo{
    position: relative;
    margin-right: auto;
    margin-left: auto;
    top: -41px;
    max-width: 160px;
    height: 37px;
}

最佳答案

请尝试以下解决方案之一，具体取决于您要完成的工作：

.menu, .logo {
    float: left;
}

要么

.menu {
    float: left;
}
.logo {
    float: right;
}