Html 如何在Bootstrap 4中的一列中创建响应性多列无序列表？

我正在尝试创建一个多列无序列表，可以相对于其标题居中。我尝试了一些我发现的创建两列的方法，但是我无法成功地使它位于标题下的中心，或者控制标题列之间的填充。但是，当我确实获得了我想要的美感时，通常使用左填充，它会失去响应能力，看起来非常难看

我正在努力实现的目标：

我目前拥有的照片：

请参见代码和样式表：

@导入url（'https://fonts.googleapis.com/css?family=Nunito:400，700800 |开放式+Sans:400700800’；
html，
身体{
身高：100%；
//宽度：100%；
最小宽度：300px；
边际：0px；
填充：0px；
字体系列：“打开Sans”，Sans serif！重要；
}
navbar先生{
字体系列：“Nunito”，无衬线字体！重要；
}
h1，
h2，
h3，
h4，
{
字体系列：“打开Sans”，Sans serif！重要；
字号：400
}
h5，
h6{
字体系列：“Nunito”，无衬线字体！重要；
字号：800；
}
.inlineFontChange{
显示：内联；
}
/*.进展{
弯曲方向：行；
}
*/
ulCenter先生{
显示器：flex；
证明内容：中心；
}
p{
文本对齐：对齐；
颜色：#3B424C；
}
#剖面图{
左边距：20px；
利润上限：28px；
边缘底部：10px；
浮动：对；
}
@仅介质屏幕和（最大宽度：480px）{
#剖面图{
浮动：无；
保证金：0自动；
证明内容：中心；
显示：块；
}
}
//navbar先生{
//背景颜色：#3B424C；//这是实际背景的颜色；导航栏深色是链接颜色！
//背景：无！重要；
//宽度：100%；
// }
贾拉拉克斯先生{
位置：相对位置；
z指数：0；
}
.jarallax>.jarallax img{
位置：绝对位置；
对象匹配：覆盖；
/*对插件的支持https://github.com/bfred-it/object-fit-images */
字体系列：“对象匹配：封面；”；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
}
/*帮助来自：https://free.nkdev.info/jarallax/*/
.覆盖{
显示：表格；
宽度：100%；
高度：75vh；
背景色：rgba（190,190,190,0.6）；
}
@仅介质屏幕和（最大高度：740像素）{
.覆盖{
高度：100vh；
}
}
.覆盖单元{
位置：绝对位置；
左：0；
//最高：35%；
最高：34%；
宽度：100%；
文本对齐：居中；
}
希罗科医生{
高度：100vh；//控制英雄的高度
}
.小节{
高度：300px；//控制子节jarallax的高度
保证金：0；
}
#基地导航{
//字体系列：“Yantramanav”，无衬线；
//字号：700；
//字体大小：20px；
列表样式类型：无；
保证金：0；
填充：0；
//溢出：隐藏；
//背景色：#3b424c；
位置：固定；
排名：0；
宽度：100%；
过渡：所有200ms的缓进缓出；
}
#基本导航隐藏{
转换：translateY（-100%）；
}
navbar先生{
排名：0；
保证金：0；
位置：固定；//这是钥匙！为了在图片上导航
宽度：100%
}
.导航栏导航.导航链接{
字号：1.2rem；
字体大小：粗体；
@介质（最大宽度：34em）{
字体大小：正常；
}
.导航栏导航项目{
填充：0 1rem；
@介质（最大宽度：34 em）{
填充：0；
}
}
}
.导航杆切换器{
光标：指针；
}
//这将调整主菜单和下拉菜单（子菜单）的颜色
$bgMain:rgba（59，
66,
76,
0); // 末尾的此颜色“0”用于导航栏隐藏的透明度
$BG下拉列表：rgba（59，
66,
76,
1);
$BG亮点：hsl（184，
85%,
43%);
$colDefault:#ffffff；
$colHighlight:#95ce33；
$dropDown:true；
navbar先生{
背景色：$bgMain；
.navbar品牌{
颜色错误；
&：悬停，
&：焦点{
颜色：高光；
}
}
.导航栏文本{
颜色错误；
}
.导航栏导航{
.导航链路{
颜色错误；
边界半径：.25rem；
边缘：0.25微米；
&：未禁用（.disabled）{
&：悬停，
&：焦点{
颜色：高光；
}
}
}
@如果（$下拉列表）{
.下拉菜单{
背景色：$BG下拉菜单；
边框颜色：$BG高光；
.下拉项{
颜色错误；
&：悬停，
&：焦点，
&.主动{
颜色：高光；
背景色：$BG高光；
}
}
.下拉分频器{
边框顶部颜色：$BG高光；
}
}
}
.nav-item.active，
.nav-item.show{
.导航链路，
.导航链接：悬停，
.导航链接：焦点{
颜色：高光；
背景色：$BG高光；
}
}
}
.导航栏切换{
边框颜色：$BG高光；
&：悬停，
&：焦点{
背景色：$BG高光；
}
.navbar切换图标{
颜色错误；
}
}
.导航栏倒塌，
.导航栏表格{
边界颜色：断层；
}
.导航栏链接{
颜色错误；
&：悬停{
颜色：高光；
}
}
}
@介质（最大宽度：575px）{
.navbar展开sm.navbar导航显示下拉菜单{
.下拉项{
颜色错误；
&：悬停，
&：焦点{
颜色：高光；
}
}
。下拉列表项。活动{
颜色：高光；
背景色：$BG高光；
}
}
}
@介质（最大宽度：767px）{
.navbar展开md.navbar导航显示下拉菜单{
.下拉项{
颜色错误；
&：悬停，
&：焦点{
颜色：高光；
}
}
。下拉列表项。活动{
颜色：高光；
背景色：$BG高光；
}
}
}
@介质（最大宽度：991px）{
.navbar展开lg.navbar导航显示下拉菜单{
.下拉项{
颜色错误；
&：悬停，
&：焦点{
颜色：高光；
}
}
。下拉列表项。活动{
颜色：高光；
背景色：$BG高光；
}
}
}
@介质（最大宽度：1199px）{
.navbar扩展xl.na