HTML div не центрирован, хотя используется flex

Question

Я создал следующий список в div, центрированном по flex.
Как видно из фрагмента, список не центрирован (как я и ожидал, используя flex в правилах list-div2 и translate в родительских элементах middle-text div.
. Кто-нибудь может мне помочь? Почему он не центрируется должным образом?

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}

<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>

Answer 1

Это из-за отступов / полей, которые браузеры по умолчанию добавляют к тегу ul.

Пример:

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}

.items-list2 {
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>

Answer 2

На самом деле таблица стилей агента пользователя имеет отступ слева. Поэтому вам нужно переписать этот стиль с помощью ul {padding-left: 0}

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

Answer 3

Вы должны присвоить padding: 0; своему ul

ul.items-list2 {
  padding: 0;
}

. W3C spec говорит, что ul имеет значение по умолчанию, равное 40px, но разные браузеры используют его.Поэтому всегда хорошо нормализовать поля и отступы.

body {
  margin: 0;
}
ul.items-list2 {
  padding: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}

<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>