Css 悬停时导航栏项目跳跃

当我在导航栏上滚动时，一些图标（但不是看起来的全部）会跳起来，文本在转换过程中看起来很糟糕。有谁能告诉我为什么他们会紧张，以及当导航栏悬停在上方时如何使文本转换良好？谢谢

我已经包括了代码和它的外观

：根目录{
--c1:rgb（251、176、64）；
--c1光：rgb（245212 164）；
--c1暗：rgb（209136 27）；
--c2:rgb（9179195）；
--c2灯光：rgb（851972009）；
--c2暗：rgb（0190205）；
--f1：罂粟蛋白；
--f2：罂粟蛋白；
--f3：罂粟蛋白；
--按钮填充：2x10px；
--输入_填充：2px 6px；
--桌垫：2件5件；
}
html{
字体大小：62.5%；
}
* {
保证金：0；
填充：0；
字体系列：var（--f1），无衬线；
字号：1.2rem；
}梅因先生{
左边距：5雷姆；
填充：1rem；
}
navbar先生{
位置：固定；
背景色：rgb（55,55,55）；
过渡：宽度600ms；
排名：0；
宽度：4rem；
高度：100vh；
z指数：100；
}
.导航栏导航{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
身高：100%；
}
.导航项目{
宽度：100%；
}
.导航项：最后一个子项{
页边顶部：自动；
}
.导航链路{
显示器：flex；
对齐项目：居中；
身高：4rem；
文字装饰：无；
}
.导航链接：悬停{
背景：黑色；
颜色：白色；
}
.链接文本{
显示：无；
左边距：1 em；
颜色：灰色；
}
.nav链接svg{
宽度：2em；
最小宽度：2rem；
保证金：0.1雷姆；
}
.nav链路i{
字号：2rem；
保证金：0自动；
颜色：灰色；
}
.图标{
宽度：4rem；
文本对齐：居中；
}
.fa小学{
颜色：var（--c1）；
}
法华中学{
颜色：var（--c1光）；
}
.标志{
字体大小：粗体；
文本转换：大写；
边缘底部：1rem；
文本对齐：居中；
颜色：var（--c2）；
背景：var（--c2）；
字号：2rem；
字母间距：0.1厘米；
宽度：100%；
}
.logo svg{
变换：旋转（0度）；
过渡时间：600ms；
}
.标志文字{
显示：内联；
位置：绝对位置；
左：-999px；
过渡时间：600ms；
}
.navbar:hover.logo svg{
变换：旋转（-180度）；
}
.导航栏：悬停{
宽度：16雷姆；
}
.navbar:悬停.链接文本{
显示：内联；
}
.navbar:hover.logo svg{
左侧边缘：13雷姆；
}
.navbar:悬停。徽标文本{
左：0px；
}

风格测试

如果给

.icon

一个

背景色

，则可以看到问题所在。当

文本对齐

设置为

居中时，其
宽度
会不断变化，同时不断尝试居中。这就是为什么它会跳。我将其
位置
设置为
绝对
，这样它就不会移动和改变大小。
您可以按照我在代码中留下的css注释进行更多调查。
我也用过这个，你也可以查一下


：根目录{
--c1:rgb（251、176、64）；
--c1光：rgb（245212 164）；
--c1暗：rgb（209136 27）；
--c2:rgb（9179195）；
--c2灯光：rgb（851972009）；
--c2暗：rgb（0190205）；
--f1：罂粟蛋白；
--f2：罂粟蛋白；
--f3：罂粟蛋白；
--按钮填充：2x10px；
--输入_填充：2px 6px；
--桌垫：2件5件；
}
html{
字体大小：62.5%；
}
* {
保证金：0；
填充：0；
字体系列：var（--f1），无衬线；
字号：1.2rem；
}梅因先生{
左边距：5雷姆；
填充：1rem；
}
navbar先生{
位置：固定；
背景色：rgb（55,55,55）；
过渡：宽度600ms；
排名：0；
宽度：4rem；
高度：100vh；
z指数：100；
}
.导航栏导航{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
身高：100%；
}
.导航项目{
宽度：100%；
}
.导航项：最后一个子项{
页边顶部：自动；
}
.导航链路{
显示器：flex；
对齐项目：居中；
身高：4rem；
文字装饰：无；
}
.导航链接：悬停{
背景：黑色；
颜色：白色；
}
/*更改链接文本以生成平滑过渡，只要过渡不适用于“显示”属性*/
.链接文本{
可见性：隐藏；
不透明度：0；
过渡：能见度为0，不透明度为1；
左侧边缘：4rem；
颜色：灰色；
}
/*添加了这个，这样公司的名字就不会受到影响*/
.链接文本：第一个孩子{
左边距：1 em；
}
.nav链接svg{
宽度：2em；
最小宽度：2rem；
保证金：0.1雷姆；
}
.nav链路i{
字号：2rem；
保证金：0自动；
颜色：灰色；
}
.图标{
位置：绝对；/*通过定位跳跃图标来修复它们*/
宽度：4rem；
文本对齐：居中；
}
.fa小学{
颜色：var（--c1