Javascript 为什么不是'；t沿横轴对中项目？

在我的移动视图中，我将.nav链接（容器）显示flex和flow direction设置为column。现在，我添加了对齐项以将横轴设置为中心，但它没有显示在容器的中心。我尝试在li元素周围添加边框，并将宽度设置为100%，但它似乎在左侧显示边距。我已将边距设置为0并进行了检查以确保，但没有效果。到目前为止，我只在chrome上测试过这个。任何想法都很好，谢谢

const导航幻灯片=（）=>{
const burger=document.querySelector（“.burger”）；
const nav=document.querySelector（“.nav links”）；
const navLinks=document.queryselectoral（“.nav links li”）；
burger.addEventListener（“单击”，（）=>{
//切换导航
导航类列表切换（“导航激活”）；
//动画链接
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=“”
}
否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+.5}s`；
}
});
//汉堡动画
burger.classList.toggle（“切换”）；
});
}
导航幻灯片（）
*{
保证金：0；
填充：0；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
背景色：rgb（83,54,110）；
字体系列：“Raleway”，无衬线；
}
.标志{
颜色：rgba（226226226226）；
文本转换：大写；
字母间距：5px；
字体大小：20px；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：30%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
颜色：rgba（226226226226）；
文字装饰：无；
字母间距：3px；
字体大小：粗体；
字体大小：14px；
}
.汉堡{
显示：无；
}
.汉堡部{
宽度：25px；
高度：3倍；；
背景色：rgba（226226226226）；
保证金：5px；
过渡：所有0.3秒缓解；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航链接{
宽度：60%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：rgb（83,54,110）；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
.nav链接李{
不透明度：0；
}
.汉堡{
显示：块；
光标：指针；
}
}
.导航激活{
转化：translateX（0%）；
}
@关键帧navLinkFade{
从{
不透明度：0；
转换：translateX（50px）；
}
到{
不透明度：1；
转换：translateX（100px）；
}
}
.toggle.line1{
变换：旋转（-45度）平移（-5px，6px）；
}
.toggle.line2{
不透明度：0；
}
.toggle.line3{
变换：旋转（45度）平移（-5px，-6px）；
}

寿司根
寿司根










似乎是由li上的translateX引起的-您正在将其从中间移动，100像素移到右侧

如果删除该动画，则链接将居中：


const导航幻灯片=（）=>{
const burger=document.querySelector（“.burger”）；
const nav=document.querySelector（“.nav links”）；
const navLinks=document.queryselectoral（“.nav links li”）；
burger.addEventListener（“单击”，（）=>{
//切换导航
导航类列表切换（“导航激活”）；
//动画链接
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=“”
}
否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+.5}s`；
}
});
//汉堡动画
burger.classList.toggle（“切换”）；
});
}
导航幻灯片（）
*{
保证金：0；
填充：0；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
背景色：rgb（83,54,110）；
字体系列：“Raleway”，无衬线；
}
.标志{
颜色：rgba（226226226226）；
文本转换：大写；
字母间距：5px；
字体大小：20px；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：30%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
颜色：rgba（226226226226）；
文字装饰：无；
字母间距：3px；
字体大小：粗体；
字体大小：14px；
}
.汉堡{
显示：无；
}
.汉堡部{
宽度：25px；
高度：3倍；；
背景色：rgba（226226226226）；
保证金：5px；
过渡：所有0.3秒缓解；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航链接{
宽度：60%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：rgb（83,54,110）；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
.nav链接李{
不透明度：0；
}
.汉堡{
显示：块；
光标：指针；
}
}
.导航激活{
转化：translateX（0%）；
}
@关键帧navLinkFade{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
.toggle.line1{
变换：旋转（-45度）平移（-5px，6p