CODEWITHSUNDEEP
htmlcsscenter-align
thealcoves
thealcoves

Reputation: 1

Unordered list items slightly off center from one another

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>

Upvotes: 0

Views: 62

Answers (1)

Asif Jalil
Asif Jalil

Reputation: 762

.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>

Upvotes: 0

Related Questions