Deleting spaces between in a flexbox

Question

This is my code:

* {
  margin: 0;
  padding: 0;
  font-family: "Arial";
  font-size: 30px;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.column {
  border-bottom: 1px solid black;
}

.column_content {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-x: auto;
}

ul {
  white-space: nowrap;
  float: left;
}

ul li {
  display: inline-block;
  justify-content: flex-start;
}


/* Version Two */

#two ul li {
  float: left;
}

<!-- Version One -->

<div class="column">
  <div class="column_content">
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
  </div>
</div>


<!-- Version Two -->

<div class="column">
  <div class="column_content" id="two">
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
  </div>
</div>

I have to use display: flex;, so Version One is the version I would like to work with. But there are spaces between the text blocks. In Version Two, you can see how it would look like without these spaces.

How is it possible to remove them, but keeping all other settings?

Thanks!