0

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
thealcoves
  • 1
  • 1

1 Answers1

0

.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>
Asif Jalil
  • 622
  • 5
  • 15