Bootstrap 4 将一个flex子项与父项的中心对齐，填写其他子项

我正在为我的网站做导航，我对flex有一个问题。我已经能够用谷歌搜索出解决许多问题的方法，但我仍然坚持这一点。这是我的代码：

我的CSS不包含这些元素的任何边距或填充，只包含背景、阴影和字体。我想要这个

元素是主导航条分区的死点。ul应分别位于左侧和右侧，如代码所示，占据其必要的宽度

目前，它采用三个元素的组合宽度，并将其中心与主导航栏分区的中心对齐。因为左侧和右侧ul的宽度不同，所以我的中间分区偏离中心