CodePen: having trouble formatting list text in a div [CSS]

Question

I'm trying to style unordered list items in a div 'terminal style' but I can't get it to work just right.
The list items are center aligned and bulleted instead of left aligned as I intend

CodePen

CSS

.outputDiv ul{
   padding:0rem;
   margin:0rem;
}

.outputDiv li{
   list-style: none;
}

JS

  function processOutput(inputString = "", outputString) {
    const outputList = document.querySelector(".output-div ul");
    const listItem = document.createElement("li");
    const inputEl = document.createElement("kbd");
    const outputEl = document.createElement("samp");
    let echoInput = (inputEl.textContent = inputString);
    let scoobyspeak = (outputEl.textContent = outputString);

    const limitLines = (max = 0) => {
      if (outputList.childNodes.length === ++max)
        outputList.removeChild(outputList.childNodes[0]);
    };
    if (outputString === "") {
      listItem.innerHTML = "Please enter  some text into the input field";
      limitLines();
      outputList.appendChild(listItem);
    } else {
      listItem.innerHTML = `'${echoInput}' <i>scoobydized</i> to: <b>${scoobyspeak}</b>`;
      outputList.appendChild(listItem);
      limitLines(4);
    }
    initInput();
  }

Answer 1

Use this CSS:

.output-div ul {
  list-style: none;
  padding: 0px
}

You are referencing a different class name, and not using the correct selector.

This one is tested on CodePen.