Trying to get rid of whitespace to left of ul element

function getFileData() {
  var fileDiv = document.querySelector('#files');

  var files = Array.from(document.getElementById('attachments').files);

  fileDiv.innerHTML = '<ul>' + files.map(file => {
    return '<li>' + file.name + '</li>';
  }).join('') + '</ul>';


};

#files {
  display: flex;
  justify-content: left;
}

#files ul {
  list-style-type: none;
  float: left;
}

#files ul li {
  display: inline;
  float: left;
}

<label>Attachments</label>
<div>
  <input type="file" class="form-control input-lg" name="attachments" id="attachments" multiple onchange="getFileData()">
</div>
<div id="files"></div>