Sortable issues

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
  </head>

  <body>
    <ul class="sort-container" id="items">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
      <li>I</li>
      <li>J</li>
      <li>K</li>
      <li>L</li>
      <li>M</li>
      <li>N</li>
      <li>O</li>
      <li>P</li>
    </ul>
    <script>
      var el = document.getElementById('items');
      var sortable = Sortable.create(el);
    </script>
  </body>

</html>

body {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sort-container {
  /* display: flex;
  flex-wrap: wrap;
  align-content: flex-start; */
  width: 100%;
  height: 100%;
  color: white;
  font-size: 0;
}
.sort-container > li {
    font-size: 1rem;
    cursor: move;
    list-style: none;
    /* flex: 0 0 calc(16.66% - 1rem); */
    display: inline-block;
    width: calc(16.66% - 1rem);
    /* height: auto; */
    padding: 1rem;
    margin: 0.5rem;
    background: red;
    text-align: center;
}
.sort-container > li:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-top: 100%;
    }
.sortable-ghost {
    opacity: 0.6;
}