Привет, у меня есть свёрстанный блок, но элементы(круги) не стоят друг под другом, как это исправить?
<section id="about">
<div class="container">
<div class="title">
<h2>
About Us
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
<div class="timeline-holder">
<div class="box">
<div class="left">
<h3>July 2018 <span>Our humble beginnings</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p>
</div>
<img src="img/about1.jpg" alt="" />
</div>
<div class="box">
<div class="right">
<h3>January 2018 <span>Our humble beginnings</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
<img src="img/about2.jpg" alt="" />
</div>
<div class="box">
<div class="left">
<h3>December 2018 <span>Our humble beginnings</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
<img src="img/about3.jpg" alt="" />
</div>
<div class="box">
<div class="right">
<h3>February 2019 <span>Our humble beginnings</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
<img src="img/about4.jpg" alt="" />
</div>
</div>
</section>
.about{
margin-top: 86px;
}
.timeline-holder {
position: relative;
}
.box {
display: flex;
align-items: center;
margin: 60px 0;
}
.box .left {
flex: 1;
padding: 0 20px;
}
.box .right {
direction: rtl;
flex: 1;
padding: 0 20px;
}
.box:nth-child(even) {
margin-right: calc(50% - 75px);
}
.box:nth-child(odd) {
flex-direction: row-reverse;
margin-left: calc(50% - 75px);
