Html 将徽标与菜单对齐

我正在尝试将一个简单的导航栏与左侧的徽标和右侧的菜单+搜索栏对齐。我就是想不出如何使它们水平对齐。我先用手机处理媒体查询。我觉得这应该有一个非常简单的修复，但我就是看不到

这是我的HTML和CSS

@媒体屏幕和（最大宽度：1499px）和（最小宽度：1153px）{
.导航栏切换，
.main nav.social{
显示：无；
}
.主导航{
显示：内联；
文本对齐：居中；
填充：10px 0px 10px 0px；
边缘顶部：20px；
}
主导航李先生{
显示：内联；
边界：无；
}
.主导航a{
填充：10px；
}
纳瓦德斯克先生{
显示器：flex；
}
.标志{
顺序：0；
}
mainnav先生{
顺序：1；
}
.搜索图标{
顺序：3；
}
标题{
最大宽度：1153px；
边缘底部：10px；
}

布尔特利奥·范德尔漂流酒店








欢迎！超级利奥v.d.随波逐流，他在诗中写下了自己的名字。

您可以使用“flex”对齐项目。 例如：

.v-align{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

---

在菜单和徽标的父div上使用“v-align”类，它会将内容集中在X轴和Y轴上。如果你想失去X轴，可以删除“调整内容”部分

如果你要使用CSS库，需要标记它。我想我已经用.navbardesk{display:flex；}完成了这项工作