deux divs se chevauchent, comment réparer?

Question

Apparemment, j'ai deux divs sur la même ligne de chevauchement, cela semble ok sur PC mais pas sur Ipad ou mobile, n'importe qui pourrait regarder à travers le code et me dire ce que j'ai manqué?

C'est le contenu qui se superpose à la vidéo YouTube.

code:

.timeline { 
 
    padding: 0px 30px; 
 
    width: 100%; 
 
    } 
 

 
    .timeline:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 45px; 
 
    width: 3px; 
 
    height: calc(100% - 0px); 
 
    background: #13294b; 
 
    } 
 

 
    .timeline .column { 
 
    margin: 20px 20px 20px 80px; 
 
    } 
 

 
    .h1 { 
 
    font-size: 55px; 
 
    color: #6a6a6a; 
 
    font-family: serif; 
 
    padding: 60px 0px 60px 0px; 
 
    font-weight: bold; 
 
    } 
 

 
    .icon { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -120px; 
 
    top: 40px; 
 
    background: #fff; 
 
    } 
 

 
    .timeline .column .title h2 { 
 
    margin-top: -70px; 
 
    margin-left: 115px; 
 
    font-size: 20px; 
 
    } 
 

 
    .timeline .column .description p { 
 
    font-size: 14px; 
 
    line-height: 20px; 
 
    margin-left: 20px; 
 
    margin-top: 10px; 
 
    } 
 

 
    .timeline .column .description { 
 
    border-left: 2px solid #59cbe8; 
 
    border-bottom: 2px solid #59cbe8; 
 
    } 
 

 
    .video { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: -90px;

<div class="timeline"> 
 
    <div class="column"> 
 
    <div class="title"><div class="icon"><img src="source"></div> 
 
    <div class="h1">2017</div> 
 
    <h2> title </h2></div> 
 
    <div class="description"> 
 
    <div class="video"> 
 
    <iframe width="280" height="158" src="youtube video link" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 

 
    <p>content</p> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

<div class="timeline"> 
<div class="column"> 
<div class="title"><div class="icon"><img src="source"></div> 
<div class="h1">2017</div> 
<h2> title </h2></div> 
<div class="description"> 
<div class="video"> 
<iframe class="iframe" width="280" height="158" src="youtube video link" frameborder="0" allowfullscreen></iframe> 
</div> 

<p>content</p> 
</div> 
</div> 
</div> 

Une meilleure utilisation certains médias requête

.timeline { 
padding: 0px 30px; 
width: 100%; 
} 

.timeline:before { 
content: ""; 
position: absolute; 
top: 20px; 
left: 45px; 
width: 3px; 
height: calc(100% - 0px); 
background: #13294b; 
} 

.timeline .column { 
margin: 20px 20px 20px 80px; 
} 

.h1 { 
font-size: 55px; 
color: #6a6a6a; 
font-family: serif; 
padding: 60px 0px 60px 0px; 
font-weight: bold; 
} 

.icon { 
content: ""; 
position: absolute; 
left: -120px; 
top: 40px; 
background: #fff; 
} 

.timeline .column .title h2 { 
margin-top: -70px; 
margin-left: 115px; 
font-size: 20px; 
} 

.timeline .column .description p { 
font-size: 14px; 
line-height: 20px; 
margin-left: 20px; 
margin-top: 10px; 
} 

.timeline .column .description { 
border-left: 2px solid #59cbe8; 
border-bottom: 2px solid #59cbe8; 
} 

.video { 
position: absolute; 
right: 0px; 
top: -90px; 

@media only screen and (max-width: 500px) { 
    .iframe 
{ 
    //your css 
} 

}