没有理由不使用awesome column-count属性，因为它有很好的浏览器支持。
我看到你创建了两个列表用于表示目的。这在概念上是错误的。你永远不应该修改你的信息层（HTML）来适应特定的表示。这就是CSS3的力量来拯救的地方。
网络是关于信息（html）+表现（css）+行为（js）的。
因此，我将两个列表合并为一个列表，并使用CSS将其显示为两列。
无论视口宽度和项目长度如何，它们始终居中。
要测试对内容长度的响应，请在TYPE here项中键入内容。

section {
  text-align: center;
}

ul {
  -webkit-column-count: 2; 
  column-count: 2;
  display: inline-block;
  list-style: none;
  padding: 0;
}

ul li {
  text-align: left;
  background-color: #eee;
}

<section>
  <p>One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.</p>
  <ul>
    <li contenteditable>
      <i class="fa fa-check"></i>TYPE here
    </li>
    <li>
      <i class="fa fa-check"></i>Item 2
    </li>
    <li>
      <i class="fa fa-check"></i>Item 3
    </li>
    <li>
      <i class="fa fa-check"></i>Item 4
    </li>
    <li>
      <i class="fa fa-check"></i>Item 5
    </li>
    <li>
      <i class="fa fa-check"></i>Item 6
    </li>
  </ul>
</section>

您应该向右浮动ul以正确对齐。请检查：https://jsfiddle.net/esx6fzyf/1/

<p align="center">One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I
    continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid
    under a tree. When the rain stopped, I began to walk home.</p>

<div>
    <div style="float: left; width: 50%;">
        <ul style="float: right;">
            <li>
                <i class="fa fa-check"></i> Item 1
            </li>
            <li>
                <i class="fa fa-check"></i> Item 2
            </li>
            <li>
                <i class="fa fa-check"></i> Item 3
            </li>
        </ul>
    </div>
    <div style="float: right; width: 50%;">
        <ul>
            <li>
                <i class="fa fa-check"></i> Item 4
            </li>
            <li>
                <i class="fa fa-check"></i> Item 5
            </li>
            <li>
                <i class="fa fa-check"></i> Item 6
            </li>
        </ul>
    </div>
</div>

仅制作一个<div>作为容器并使用display: flex。
这样应该没问题。看看多个CSS Flexbox属性，它会让你的代码更正确更容易!
我会这么做：

#container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  /* it will calculate automatically, try space-between too */
}

#container ul {
  max-width: 50%;
}

<div id="container">
  <ul>
    <li><i class="fa fa-check"></i> Item 1</li>
    <li><i class="fa fa-check"></i> Item 2</li>
    <li><i class="fa fa-check"></i> Item 3</li>
  </ul>
  <ul>
    <li><i class="fa fa-check"></i> Item 4</li>
    <li><i class="fa fa-check"></i> Item 5</li>
    <li><i class="fa fa-check"></i> Item 6</li>
  </ul>
</div>

可以使用CSS Flexbox将包含<ul>的<div>封装在父div中（在我的例子中是.ul-holder），并应用align属性，例如：

.ul-holder {
  display: flex;
  justify-content: center /* Horizontally aligns content in the center */
}

请看下面的片段：
x一个一个一个一个x一个一个二个x
希望这有帮助！

您可以简单地添加文本对齐：下方居中：

<p>One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.</p>

    <div style="width: 50%; float: left; text-align:center">
    <ul style="">
        <li>
    <i class="fa fa-check"></i>   Item 1</li>
        <li>
    <i class="fa fa-check"></i>   Item 2</li>
        <li>
    <i class="fa fa-check"></i>   Item 3</li>
    </ul>
    </div>
    <div style="width: 50%; float: right; text-align:center">
    <ul style="text-align:left">
        <li>
    <i class="fa fa-check"></i>   Test</li>
        <li>
    <i class="fa fa-check"></i>   Lorem Ipsum</li>
        <li>
    <i class="fa fa-check"></i>   Item 6</li>
    </ul>
    </div>