Unordered list items slightly off center from one another

Question

I'm having issues with unordered list items being slightly off center from each other. I'm very new to this. Can anyone advise?

I thought using center align would result in all text being symmetrical but each list item is slightly askew. I also tried using list-style-position: inside; as per other answers but this didn't seem to help.

.list {
  text-align: center;
  padding-left: 0;
  list-style-position: inside;
  font-style: normal;
  font-family: cursive;
  color: teal;
  display: block;
  border-spacing: 5px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: 92.35%;
  background-color: bisque;
}

<div class="header">
  <h1> Birthday Time!</h1>

  <div class="list">
    <h3> What to bring:</h3>

    <ul>
      <li> Balloons</li>
      <li> Pinata</li>
      <li> Crisps</li>
    </ul>
  </div>

Answer 1

.list {
  text-align: center;
  padding-left: 0;
  list-style-position: inside;
  font-style: normal;
  font-family: cursive;
  color: teal;
  display: block;
  border-spacing: 5px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: 92.35%;
  background-color: bisque;
}

.list ul {
  text-align: left;
  padding: 0;
  display: inline-block;
}

<div class="header">
  <h1> Birthday Time!</h1>

  <!--Date-->
  <h2> On the 13th March </h2>
  <img class="cake" src="https://i.pinimg.com/originals/a9/72/bd/a972bdeb55940936f87036c7d4b14dfb.jpg" alt="picture of a birthday cake styled as mountains" width="300">
  <br>
</div>

<!--Item list-->
<div class="list">
  <h3> What to bring:</h3>
  <ul style="">
    <li> Balloons</li>
    <li> Pinata</li>
    <li> Crisps</li>
  </ul>  
</div>