cant fix the position of the left container - html

Question

I am not sure why the position for the circle and container for the left side can't fix like the right side. When I resize the screen, the circle of the right container can still remind in the middle of the line but the left side cant. Does anyone know what is the error?
.timeline {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 0.375em;
background-color: #D5D5D5;
top: 0;
bottom: 0;
left: 50%;
margin-left: -0.1875em;
}
.container2 {
padding: 0.625em 2.5em;
position: relative;
background-color: inherit;
width: 40%;
}
.container2::after {
content: '';
position: absolute;
width: 1.5625em;
height: 1.5625em;
right: -1.0625em;
background-color: white;
border: 0.25em solid #86B5D0;
top: 0.9375em;
border-radius: 50%;
z-index: 1;
}
.left {
left: 2.2%;
}
.right {
left: 50%;
}
.right::after {
left: -1em;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 1.375em;
width: 0;
z-index: 1;
right: 1.875em;
border: medium solid #2D336A;
border-width: 0.625em 0 0.625em 0.625em;
border-color: transparent transparent transparent #2D336A;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 1.375em;
width: 0;
z-index: 1;
left: 1.875em;
border: medium solid #2D336A;
border-width: 0.625em 0.625em 0.625em 0;
border-color: transparent #2D336A transparent transparent;
}
.content {
padding: 1.25em 1.875em;
background-color: #2D336A;
position: relative;
border-radius: 0.375em;
}
#media screen and (max-width: 40%) {
/* Place the timelime to the left */
.timeline::after {
left: 1.9375em;
}
/* Full-width containers */
.container2 {
width: 100%;
padding-left: 4.375em;
padding-right: 1.5625em;
}
/* Make sure that all arrows are pointing leftwards */
.container2::before {
left: 3.75em;
border: medium solid white;
border-width: 0.625em 0.625em 0.625em 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after,
.right::after {
left: 0.9375em;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
<div class="timeline">
<div class="container2 left">
<div class="content">
<font class="titleText1">1</font><br><br> ABC
</div>
</div>
<div class="container2 right">
<div class="content">
<font class="titleText">2</font><br><br> ABC
</div>
</div>
</div>

Answer 1

Your .container2 elements are positioned with relative so that they remain in a vertical flow. When you position the .right one with left: 50%, it shifts it exactly over the timeline: great!
Now you'd like to do the opposite for the .left one, which would be right: 50%. But that won't work as it's not positioned in absolute, so it will shift from its natural position within the page flow.
Fix this by setting it float: right so it starts from the far right and ends up spot-on the timeline. But it breaks the flow again.
So add clear: both to .container2 to restore vertical flow and you're finally there.
One of the very rare instances where float can actually help!
.timeline {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 0.375em;
background-color: #D5D5D5;
top: 0;
bottom: 0;
left: 50%;
margin-left: -0.1875em;
}
.container2 {
clear: both; /* Add this */
padding: 0.625em 2.5em;
position: relative;
background-color: inherit;
width: 40%;
}
.container2::after {
content: '';
position: absolute;
width: 1.5625em;
height: 1.5625em;
right: -1.0625em;
background-color: white;
border: 0.25em solid #86B5D0;
top: 0.9375em;
border-radius: 50%;
z-index: 1;
}
.left {
float: right; /* Add this */
right: 50%; /* Change this */
}
.right {
left: 50%;
}
.right::after {
left: -1em;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 1.375em;
width: 0;
z-index: 1;
right: 1.875em;
border: medium solid #2D336A;
border-width: 0.625em 0 0.625em 0.625em;
border-color: transparent transparent transparent #2D336A;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 1.375em;
width: 0;
z-index: 1;
left: 1.875em;
border: medium solid #2D336A;
border-width: 0.625em 0.625em 0.625em 0;
border-color: transparent #2D336A transparent transparent;
}
.content {
padding: 1.25em 1.875em;
background-color: #2D336A;
position: relative;
border-radius: 0.375em;
}
#media screen and (max-width: 40%) {
/* Place the timelime to the left */
.timeline::after {
left: 1.9375em;
}
/* Full-width containers */
.container2 {
width: 100%;
padding-left: 4.375em;
padding-right: 1.5625em;
}
/* Make sure that all arrows are pointing leftwards */
.container2::before {
left: 3.75em;
border: medium solid white;
border-width: 0.625em 0.625em 0.625em 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after,
.right::after {
left: 0.9375em;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
<div class="timeline">
<div class="container2 left">
<div class="content">
<font class="titleText1">1</font><br><br> ABC
</div>
</div>
<div class="container2 right">
<div class="content">
<font class="titleText">2</font><br><br> ABC
</div>
</div>
</div>