Html 助推器中心导航项目

你好，我想问一下，我如何能中心，这些东西：家，论坛，统计等。。到屏幕中央。我尝试了很多功能，但没有一个适合我。第二个问题是背景边框按钮，当我指向文本时，按钮文本会向右移动。 谢谢你的建议

.navbar默认值{
背景色：rgb（48,48,48）；
}
.导航栏导航{
字号：20px
}
.定制开关{
边框颜色：白色；
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg-viewBox=”-9 0 35 33'xmlns=”http://www.w3.org/2000/svg“%3E%3Cpath stroke='rgba（255，255，255，0.8）'stroke width='2'stroke linecap='round'stroke miterlimit='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”）；
}
.nav选项卡>li>a:悬停{
背景色：紫色！重要；
边界：中等无；
边界半径：0；
颜色：#fff；
}
.导航项目{
颜色：白色；
字体大小：22px；
显示：块；
}
.导航项目：悬停{
边界半径：12px；
背景：rgb（80,80,80）；
填充物：5px；
宽度：100px；
高度：50px；
}

为了使导航项目居中，请使用mx auto类将其对准中心。在新选项卡中查看输出打开结果（全屏）
我还覆盖了.navbar nav的引导类

.navbar-nav {
  font-size: 20px;
  width:75% !important;
  display:flex !important;
  justify-content:space-evenly !important;
  align-items:center !important;
}

.navbar默认值{
背景色：rgb（48,48,48）；
}
.导航栏导航{
字体大小：20px；
宽度：75%！重要；
显示：flex！重要；
调整内容：空间均匀！重要；
对齐项目：居中！重要；
}
.定制开关{
边框颜色：白色；
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg-viewBox=”-9 0 35 33'xmlns=”http://www.w3.org/2000/svg“%3E%3Cpath stroke='rgba（255，255，255，0.8）'stroke width='2'stroke linecap='round'stroke miterlimit='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”）；
}
.nav选项卡>li>a:悬停{
背景色：紫色！重要；
边界：中等无；
边界半径：0；
颜色：#fff；
}
.导航项目{
颜色：白色；
字体大小：22px；
显示：块；
}
.导航项目：悬停{
边界半径：12px；
背景：rgb（80,80,80）；
填充物：5px；
宽度：100px；
高度：50px；
}

这是否回答了您的问题？