在li标签后删除使用css内联块属性的边距？

Question

目标： 要创建一个主导航，其中元素以text-align：center为中心应用于ul标记，以便li标记全部位于中心。

但问题是，当使用float：left in li时，text-align：center显然不起作用。 相反，当我使用display：inline-block将li放在一行中来实际创建菜单时，它会在li标签之间添加一个奇怪的边距。为什么重要的是我还需要在li中设置一个边框，但是当在悬停时使用背景颜色时它会清楚地显示出边缘。

有解决方法吗？

某些代码为例

ol { 
    clear: both; box-sizing: border-box; min-height: 38px;
    margin: auto;text-align: center; } 
ol > li { width: unset; padding: unset; display: inline-block; } 
ol > li:before {  content: ""; display: block; position: absolute; z-index: 1; top: 50%; left:
-1px; width: 2px; height: 40px; background-color: #F8991B; border-radius: unset; transform: translate(0,-50%);  } 
li > a {  text-transform: uppercase; margin: unset; display: inline-block; box-sizing: border-box; padding: 4px 21px; width: 100%; overflow: visible; font-weight: bold;  }