Javascript div在项目页面上没有正确对齐

我希望以“dashboard”开头的整个.main类与页面顶部正确对齐，并希望它与侧边栏相邻，但其对齐方式在侧边栏下方

以下是我的页面的外观： 目标页面外观：

正文{
字体系列：“罗萨里奥”；
}
.侧边栏{
利润率：10px-8px 20px 20px；
}
.sidebar>li>a{
填充：20px 20px；
}
梅因先生{
边缘顶部：5px；
填充：20px；
}
.占位符{
边缘顶部：10px；
边缘底部：30px；
}
.占位符{
边缘底部：20px；
}
.占位符img{
显示：内联；
边界半径：50%；
}
正文、.sticky页脚包装{
最小高度：100vh；
}

管理仪表板








搜寻















仪表板
标签
Lorem ipsum dolor sit amet，奉献精英

标签
Lorem ipsum dolor sit amet，奉献精英

标签
Lorem ipsum dolor sit amet，奉献精英

标签
Lorem ipsum dolor sit amet，奉献精英

详细结果

身份证#
细节1#
细节2#
细节3#
细节4#
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
234
约翰
五旬斋
中国
90$
页脚
我停留在视口的底部
除非页面内容进一步推动我。
©2020品牌公司。

您似乎未将

main

放置在

.row

之外，这就是它未正确对齐的原因：

正文{
字体系列：“罗萨里奥”；
}
.侧边栏{
利润率：10px-8px 20px 20px；
}
.sidebar>li>a{
填充：20px 20px；
}
梅因先生{
边缘顶部：5px；
填充：20px；
}
.占位符{
边缘顶部：10px；
边缘底部：30px；
}
.占位符{
边缘底部：20px；
}
.占位符img{
显示：内联；
边界半径：50%；
}
正文、.sticky页脚包装{
最小高度：100vh；
}

管理仪表板








搜寻



      <ul class="nav flex-column sidebar">
        <li class="nav-item"><a class="nav-link active" href="#"><i class="fas fa-chart-area"></i> Old Reports</a></li>
        <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-dollar-sign"></i> Revenues</a></li>
        <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-globe"></i> Countries</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
      </ul>
    </div>
  </div> <-------------------- This closing div shouldn't be here, rather at the end of the upcoming div
  <div class="col-sm-9 col-md-10 main">
    <h1 class="page-header"><i class="fa fa-tachometer" aria-hidden="true"></i>
      Dashboard</h1>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2">
            ...
        </div>
        <div class="col-sm-9 col-md-10 main">
           ...
        </div>
    </div>
</div>