How do I space out the checkbox, list and delete button

I made a to do list, all the functions work but I cant figure out how to put spaces in between the input, and delete button, then align the delete button just like the checkboxs. After many inputs are enter the entire list just looks cluttered.

var inputItem = document.getElementById("inputItem");
inputItem.focus();

// adds input Item to list
function addItem(list, input) {
  var inputItem = this.inputItem;
  var list = document.getElementById(list);
  var listItem = document.createElement("li");

  // Configure the delete button
  var deleteButton = document.createElement("button");
  deleteButton.innerText = "X";
  deleteButton.addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });

  // Configure the check box
  var checkBox = document.createElement("input");
  checkBox.id = "check";
  checkBox.type = 'checkbox';
  checkBox.addEventListener('change', function() {
    labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
  });

  // Configure the label
  var label = document.createElement("label");
  var labelText = document.createElement("span");
  labelText.innerText = input.value;

  // Put the checkbox and label text in to the label element
  label.appendChild(checkBox);
  label.appendChild(labelText);

  // Put the label (with the checkbox inside) and the delete
  // button into the list item.
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);

  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
  return false;

}
localStorage.setItem("list", list);

localStorage.getItem("list").forEach(function(list) {
  elem.textContent = list;
});

body {
  text-align: center;
}

form {
  display: inline-block;
}

#outerDiv {
  padding: 30px;
  text-align: center;
}

#innerDiv {
  margin: auto;
  width: 200px;
  height: 100px;
}

ul {
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  padding: 12px 8px 12px 40px;
  background: rgb(148, 160, 181);
  list-style-type: none;
  font-size: 18px;
}

#submit {
  position: absolute;
  padding: 10px 16px;
}


/* Style the input */

input {
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 10px;
  float: left;
  font-size: 16px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<h1 align="center"> To-Do List </h1>

<body>
  <div id="outerDiv">
    <form onsubmit="return addItem('list', this.inputItem)">
      <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
      <input id="submit" type="submit">
    </form>
  </div>

  <div id="innerDiv">
    <ul id="list"></ul>
  </div>

  <script>
    var inputItem = document.getElementById("inputItem");
    inputItem.focus();

    // adds input Item to list
    function addItem(list, input) {
      var inputItem = this.inputItem;
      var list = document.getElementById(list);
      var listItem = document.createElement("li");

      // Configure the delete button
      var deleteButton = document.createElement("button");
      deleteButton.innerText = "X";
      deleteButton.addEventListener("click", function() {
        this.parentElement.style.display = 'none';
      });

      // Configure the check box
      var checkBox = document.createElement("input");
      checkBox.id = "check";
      checkBox.type = 'checkbox';
      checkBox.addEventListener('change', function() {
        labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
      });

      // Configure the label
      var label = document.createElement("label");
      var labelText = document.createElement("span");
      labelText.innerText = input.value;

      // Put the checkbox and label text in to the label element
      label.appendChild(checkBox);
      label.appendChild(labelText);

      // Put the label (with the checkbox inside) and the delete
      // button into the list item.
      listItem.appendChild(label);
      listItem.appendChild(deleteButton);

      list.appendChild(listItem);
      inputItem.focus();
      inputItem.select();
      return false;

    }
    localStorage.setItem("list", list);

    localStorage.getItem("list").forEach(function(list) {
      elem.textContent = list;
    });
  </script>

</body>

</html>

Solution

We meet again. Part of the problem was that you were centering everything which was throwing off your styles. I removed the centering except on your #outerDiv. Then, I put a little bit of margin to the right of the checkbox so they wouldn't sit too close to each other. Finally, the button I floated to the right so that they will always all be right aligned.

var inputItem = document.getElementById("inputItem");
inputItem.focus();

// adds input Item to list
function addItem(list, input) {
  var inputItem = this.inputItem;
  var list = document.getElementById(list);
  var listItem = document.createElement("li");

  // Configure the delete button
  var deleteButton = document.createElement("button");
  deleteButton.innerText = "X";
  deleteButton.addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });

  // Configure the check box
  var checkBox = document.createElement("input");
  checkBox.id = "check";
  checkBox.type = 'checkbox';
  checkBox.addEventListener('change', function() {
    labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
  });

  // Configure the label
  var label = document.createElement("label");
  var labelText = document.createElement("span");
  labelText.innerText = input.value;

  // Put the checkbox and label text in to the label element
  label.appendChild(checkBox);
  label.appendChild(labelText);

  // Put the label (with the checkbox inside) and the delete
  // button into the list item.
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);

  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
  return false;

}
//localStorage.setItem("list", list);

//localStorage.getItem("list").forEach(function(list) {
//  elem.textContent = list;
//});

body {}

form {
  display: inline-block;
}

#outerDiv {
  padding: 30px;
  text-align: center;
}

#innerDiv {
  margin: auto;
  width: 200px;
  height: 100px;
}

ul {
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  padding: 12px 8px 12px 20px;
  background: rgb(148, 160, 181);
  list-style-type: none;
  font-size: 18px;
}

#submit {
  position: absolute;
  padding: 10px 16px;
}


/* Style the input */

button {
  float: right;
}

input {
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 10px;
  float: left;
  font-size: 16px;
  margin-right: 8px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<h1 align="center"> To-Do List </h1>

<body>
  <div id="outerDiv">
    <form onsubmit="return addItem('list', this.inputItem)">
      <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
      <input id="submit" type="submit">
    </form>
  </div>

  <div id="innerDiv">
    <ul id="list"></ul>
  </div>
</body>

</html>