使用css列时最后一个li被拆分为中间

Question

因此，我在正在构建的整页导航中使用css列。这是因为可以将导航栏动态添加到其中，因此需要为更多的导航项留出空间。

但是，在某些导航项标题足够长到可以分为两行的情况下，最后一个li似乎被切成两半。看起来好像是在门户的中间。

以下屏幕截图：

https://i.stack.imgur.com/TvxtA.jpg

我似乎已经用尽了所有可能的列样式，到目前为止，什么都没用。

代码如下：

html：

<div class="category-headers">
    <ul id="category_header_content">
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Long Title Page</a></li>
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Page</a></li>
        ...
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Long Title Page</a></li>
        <li><a data-dismiss="modal" href="/waterproofing-applications/test-6/" class="">Template 6 Test Page</a></li>
    </ul>
</div>

scss：

.category-headers{
  position: absolute;
  height: calc(100vh - 185px);
  padding: 0 50px;
  top: 110px;
  width: 40%;
  left: 60%;
  column-count: 2;
  column-fill: auto;
  padding-top: 30px;
  ul{
    margin: 0 0 30px 0;
    height: 100%;
    padding: 0;
    display: inline-block;
    li{
      list-style: none;
      margin-bottom: 10px;
      padding-right: 20px;
      a{
         color: $text-light-blue;
         font-size: 20px;
      }
    }
  }  
}