Prevent two divs from overlapping? - html

Question

My image div and my iframe div keep overlapping at certain points when I expand the size of the browser.
I tried making them both static and put them both in the same container (bootstrap 4) but still nothing, any ideas?
https://codepen.io/Modestas/pen/LjvQVb
body {
background: #191a1c;
background: url("http://silviahartmann.com/background-tile-art/images/black_grundge_seamless_tile1.jpg");
background-position: center center;
margin-top: 10px;
}
.top {
text-align: center;
color: white;
width: 50%;
margin: auto;
position: relative;
}
h4 {
font-style: italic;
font-family: serif;
}
.jumbotron1 {
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
color: rgba(256, 256, 256, 0.7);
font-family: serif;
border-radius: 5px;
top: 2.6vw;
*/ margin: 0 auto;
margin-bottom: 15px;
padding: 7px;
position: relative;
}
img {
height: 50vw;
width: 40vw;
opacity: 0.6;
border-radius: 5px;
margin-bottom: 2.7rem;
margin-right: 4rem;
margin-top: 5%;
left: -1.5rem;
right: 0px;
}
iframe {
opacity: 0.5;
border-radius: 5px;
height: 50vw;
width: 20rem;
margin-top: 5%;
margin-left: 5%;
right: 6vw;
}
#jumbo2 {
color: rgba(256, 256, 256, 0.7);
width: 53vw;
height: 100%;
font-family: serif;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
position: relative;
}
#jumbo2 p {
/* font-size: 1.5vw; */
text-align: center;
}
#italic {
font-style: italic;
/* font-size: 1.5vw; */
}
#date {
font-style: italic;
margin-left: 5vw;
margin-bottom: 20px;
/* background-color: rgba(10,10,10,0.5); */
margin: 0 auto;
text-align: center;
border-radius: 5px;
color: rgba(256, 256, 256, 0.7);
}
#wiki {
margin-top: px;
background-color: rgba(10, 10, 10, 0.5);
padding: 5px;
width: 10%;
text-align: center;
color: white;
border-radius: 5px;
/* bottom: 30px; */
margin: 0 auto;
}
<div class="container">
<div class="container">
<div class="row">
<div class="top col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1>Zyzz</h1>
<h4>~ The Legacy</h4>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="jumbotron jumbotron1 col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p id="italic">"Everybody one day, will die and be forgotten. Find a passion, form relationships; don't be afraid to get out there and fuck what everyone else thinks"
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<img src="https://s-media-cache-ak0.pinimg.com/564x/0b/70/49/0b704937424f40df354456c91219d0a1.jpg">
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<iframe width="210" height="250" src="https://www.youtube.com/embed/16uDoya2rfQ">
</iframe>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="jumbotron col-12 col-12-sm col-12-md col-12-lg col-12-xl" id="jumbo2">
<p>Aziz Sergeyevich Shavershian AKA "Zyzz" was Born on 24th March 1989.</p>
<p>Zyzz used to be a skinny kid before being inspired to start working out by his bodybuilding brother. From there on his life changed dramatically. His commitment to pushing the physical limits of his body, eating a strict and regulated diet and
getting the right amount of sleep began to manifest and produce amazing results. It was not long before Zyzz had transformed into a greek god who not only looked great but also radiated confidence and charisma.</p>
<p> His "IDGAF" attitude and his relentless commitment to self-improvement and fitness has inspired many people to hit the gym, live a care-free life and ultimately change their entire lives around and encourage them to reach their full potential.</p>
<p> Unfortunately, Zyzz passed away on august 5th 2011, after suffering from a heartattack in a sauna whilst on holiday in Pattaya, Thailand. His cause of death is not fully known but his mother has stated that zyzz has had a history of high blood
pressure and dizziness. Some however, speculate that his death was caused by an abuse of stimulants and anabolic steroids. Nevertheless, Zyzz's death remains to be a controversial topic.</p>
<p> Despite his untimely demise, Zyzz has created a legacy and continues to live on through the many people who he has inspired to better themselves, have fun and make the most of their lives.</p>
</div>
</div>
</div>
<div class="container">
<div class="row ">
<div id="date" class="col-10 col-10-sm col-10-md col-10-lg col-10-xl">
<p>R.I.P, 24 March 1989 – 5 August 2011</p>
</div>
<div class="col-10 col-10-sm col-10-md col-10-lg col-10-xl" id="wiki">
<p>For more information pertaining to Zyzz and his legacy, I invite you to read more
here.
</p>
</div>
</div>
</div>

Answer 1

in the image tag CSS, you have to use max-width and don't use height for an image.
you can replace our code with this.
img {
height: auto;
width: 40vw;
max-width:100%;
opacity: 0.6;
border-radius: 5px;
margin-bottom: 2.7rem;
margin-right: 4rem;
margin-top: 5%;
left: -1.5rem;
right: 0px;
}