col-md with video not appearing inside content div

Question

I am trying to have a series of videos in columns, within a content div. For some reason, in Dreamweaver and on Edge and Safari, the content div is not reading the video col div, so the white background ends and the video hangs off onto the black background.

*This is not the video I am using on the site, just using it as a placeholder here

HTML

<div class="container theme-showcase" role="main"<h1>Text</h1>  
<div class="content"><div class="content2">
    
<img class="img-responsive" src="menu/Header.jpg" alt="header"><br><br>
    
<div class="col-md-5">
<div class="video-responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/lEj8bnx0TB0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><br>

<div class="col-md-5"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p></div>
    
</div>  </div>  </div>

CSS

body {
background: black;
}

h1 {
font-size: 1.3em; 
color: #ed1e79; 
line-height: 1.2; 
font-family: Tahoma, Verdana, serif;
text-align: left; 
text-decoration: bold;
}

.container {
margin-right: auto;
margin-left: auto;
}

.content {position: relative;
background-color: white; 
margin-right: auto;
margin-left: auto;
border:4px solid #ed1e79;
border-radius: 25px;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.content2 {background: white;
width: 98%;
padding-top: 2%;
margin-right: auto;
margin-left: auto;
    border-radius: 25px;
}

If I switch the video to text, it works just fine. I don't know why the video is causing a problem.