Html 主要内容和scrollspy导航列重叠

我想调整两个元素的对齐方式：左侧导航和主内容div相互重叠。我没有一些具体的条件，它应该在列中彼此相邻，没有重叠

下面是导航和scrollspy的代码。您必须运行代码段并使用完整页面链接来查看内容

$（函数（）
{
$（'[data toggle=“popover”]'）。popover（）
})

SCROLLSPY的CSS*/ 身体 { 位置：相对位置； } ul.nav-pills.flex-column { 顶部：20px； 位置：固定； } 第8分区 { 高度：500px； 边缘顶部：50px； }

第一节
尝试滚动此部分，并在滚动时查看导航列表

第二节
尝试滚动此部分，并在滚动时查看导航列表

第三节
尝试滚动此部分，并在滚动时查看导航列表

第4-1节
尝试滚动此部分，并在滚动时查看导航列表

第4-2节
尝试滚动此部分，并在滚动时查看导航列表

col-xl-2类导致此重叠。移除它

文件
/*SCROLLSPY的CSS*/
身体
{
位置：相对位置；
}
ul.nav-pills.flex-column
{
顶部：20px；
位置：固定；
}
第8分区
{
高度：500px；
边缘顶部：50px；
}






















第一节
尝试滚动此部分，并在滚动时查看导航列表

第二节
尝试滚动此部分，并在滚动时查看导航列表

第三节
尝试滚动此部分，并在滚动时查看导航列表

第4-1节
尝试滚动此部分，并在滚动时查看导航列表

第4-2节
尝试滚动此部分，并在滚动时查看导航列表

$（函数（）
{
$（'[data toggle=“popover”]'）。popover（）
})