Align center Image inside ul li and div

Question

I am trying to align the images vertically inside div with flex but I just can't seem to figure out the correct way. it always shows unequal space on the left and right side of the image

img {
   width: 400px;
}

#thirdDiv {
  height: 600px;
  width: 500px;
  background-color: tomato;
  padding: 50px;
  border-color: black;
  border-style: solid;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#thirdDiv ul {
  list-style: none;
}

<div id="thirdDiv">
  <ul>
    <li><img src="http://www.gildedgingerbread.com/wp-content/uploads/2017/08/Samgyeopsal-1.jpg" alt=""></li>
    <li><img src="https://i2.wp.com/seonkyounglongest.com/wp-content/uploads/2019/06/samgyeopsal-7.jpg?fit=1300%2C867&ssl=1" alt=""></li>
  </ul>
</div>

heres a snip of my div ul li

Answer 1

ul tags by default have indentation, causing the images to have a left padding. To remove it, use padding:0;

img {
  width: 400px;
}

#thirdDiv {
  height: 600px;
  width: 500px;
  background-color: tomato;
  padding: 50px;
  border-color: black;
  border-style: solid;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#thirdDiv ul {
  list-style: none;
  padding-left:0;
}

<div id="thirdDiv">
  <ul>
    <li><img src="http://www.gildedgingerbread.com/wp-content/uploads/2017/08/Samgyeopsal-1.jpg" alt=""></li>
    <li><img src="https://i2.wp.com/seonkyounglongest.com/wp-content/uploads/2019/06/samgyeopsal-7.jpg?fit=1300%2C867&ssl=1" alt=""></li>
  </ul>
</div>

Answer 2

add this code

#thirdDiv ul {
list-style: none;
margin: 0;
padding: 0;
}

Answer 3

ul tags have some indentation by default , which is causing your images to have a left padding. You can remove it by using padding: 0;

#thirdDiv ul {
  list-style: none;
  padding-left:0;
}