Html 无法在同一行中对齐

我无法在同一水平线上对齐两个内容。我用的是flex。如何对齐导航菜单和其他flex内容

const navButton=document.querySelector（'button[aria expanded]”）；
toggleNav函数({
目标
}) {
const expanded=target.getAttribute（'aria-expanded'）=='true'| | false；
setAttribute（'aria-expanded'，！expanded）；
}
navButton.addEventListener（'click'，toggleNav）
*{
框大小：边框框；
保证金：0；
填充：0；
溢出：隐藏；
字体系列：“Roboto”，无衬线；
}
.包裹{
宽度：100%；
保证金：0自动；
}
[aria controls=“菜单列表”]{
显示：无；
}
.菜单ul{
列表样式：无；
显示器：flex；
证明内容：之间的空间；
宽度：90%；
保证金：20px自动；
}
李先生{
柔性生长：1；
弹性基准：1px；
填充：10px；
}
.菜单ul li a{
显示：块；
文本对齐：居中；
文字装饰：无；
字体大小：20px；
字号：700；
背景：#ffc600；
填充：10px；
颜色：黑色；
}
梅因先生{
宽度：100%；
}
.cat1{
右边距：20px；
弹性：6；
背景：url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
高度：400px；
z指数：-1；
}
.c1title{
z指数：1；
颜色：黑色；
背景：#ffc600；
位置：绝对位置；
顶部：130像素；
左：130像素；
字体大小：30px；
填充物：5px；
字号：600；
}
C.c1para{
z指数：1；
颜色：黑色；
背景：#ffc600；
位置：绝对位置；
顶部：250px；
左：130像素；
字体大小：16px；
填充物：5px；
字号：600；
}
猫先生{
弹性：2；
显示器：flex；
弯曲方向：立柱；
右边距：20px；
}
.第二类{
弹性：1；
背景：#ffc600；
边缘底部：25px；
显示器：flex；
}
.c2title{
字体大小：30px；
字号：600；
文本对齐：居中；
保证金：自动；
}
.小{
显示：块；
字体大小：16px；
字号：600；
}
.cat3{
弹性：1；
背景：#ffc600；
显示器：flex；
}
.c3title{
字体大小：30px；
字号：600；
文本对齐：居中；
保证金：自动；
}
@介质（最小宽度：900px）{
.英雄{
宽度：90%；
显示器：flex；
保证金：0自动；
}
}
@介质（最大宽度：1000px）{
.菜单{
透视图：800px；
}
[aria controls=“菜单列表”]{
显示：块；
边缘底部：10px；
}
.菜单ul{
最大高度：0；
溢出：隐藏；
变换：rotateX（90度）；
过渡：均为0.5s；
}
[aria expanded=“true”]~ul{
显示：网格；
最大高度：500px；
变换：rotateX（0）；
}
[aria expanded=“false”]。关闭{
显示：无；
}
[aria expanded=“true”]关闭{
显示：内联块；
}
[aria expanded=“true”]打开{
显示：无；
}
}

☰
×
菜单







特里的墨西哥玉米卷
相当不错的玉米卷

1.99美元

玉米卷
3.99$

康普茶
您正在将
显示：网格设置为
[aria expanded=“true”]~ul
。拆下它，它会很好地工作


*{
框大小：边框框；
保证金：0；
填充：0；
溢出：隐藏；
字体系列：“Roboto”，无衬线；
}
.包裹{
宽度：100%；
保证金：0自动；
}
[aria controls=“菜单列表”]{
显示：无；
}
.菜单ul{
列表样式：无；
显示器：flex；
弹性流动：柱无包裹；
证明内容：之间的空间；
宽度：90%；
保证金：20px自动；
}
李先生{
柔性生长：1；
弹性基准：1px；
填充：10px；
}
.菜单ul li a{
显示：块；
文本对齐：居中；
文字装饰：无；
字体大小：20px；
字号：700；
背景：#ffc600；
填充：10px；
颜色：黑色；
}
梅因先生{
宽度：100%；
}
.cat1{
右边距：20px；
弹性：6；
背景：url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
高度：400px；
z指数：-1；
}
.c1title{
z指数：1；
颜色：黑色；
背景：#ffc600；
位置：绝对位置；
顶部：130像素；
左：130像素；
字体大小：30px；
填充物：5px；
字号：600；
}
C.c1para{
z指数：1；
颜色：黑色；
背景：#ffc600；
位置：绝对位置；
顶部：250px；
左：130像素；
字体大小：16px；
填充物：5px；
字号：600；
}
猫先生{
弹性：2；
显示器：flex；
弯曲方向：立柱；
右边距：20px；
}
.第二类{
弹性：1；
背景：#ffc600；
边缘底部：25px；
显示器：flex；
}
.c2title{
字体大小：30px；
字号：600；
文本对齐：居中；
保证金：自动；
}
.小{
显示：块；
字体大小：16px；
字号：600；
}
.cat3{
弹性：1；
背景：#ffc600；
显示器：flex；
}
.c3title{
字体大小：30px；
字号：600；
文本对齐：居中；
保证金：自动；
}
@介质（最小宽度：900px）{
.英雄{
宽度：90%；
显示器：flex；
保证金：0自动；
}
}
@介质（最大宽度：1000px）{
.菜单{
透视图：800px；
}
[aria controls=“菜单列表”]{
显示：块；
边缘底部：10px；
}
.菜单ul{
最大高度：0；
溢出：隐藏；
变换：rotateX（90度）；
过渡：均为0.5s；
}
[aria expanded=“true”]~ul{
最大高度：500px；
变换：rotateX（0）；
}
[aria expanded=“false”]。关闭{
显示：无；
}
[aria expanded=“true”]关闭{
显示：内联块；
}
[aria expanded=“true”]打开{
显示：无；
}
}

韦斯比特餐厅
☰
×
菜单