HTML div not centered though flex is used - html

Question

I have created the following list within a div that is centered by flex.
As you can see in the snippet, the list is not centered (as I would expect with using flex on the list-div2 and the translate rule in the parents middle-text div.
Can someone help me? Why does it not get centered properly?
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

That's because of the padding/margin that browsers add to the ul tag by default.
Example:
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

Actually user agent stylesheet have padding left. So you need to overwrite that style by 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

You should give padding: 0; to your ul
ul.items-list2 {
padding: 0;
}
The W3C spec says ul has as default margin of 40px, but different browsers over ride this. So its always good to normalize margins and paddings.
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>