col-md with video not appearing inside content div

[LKinneyX23]

I have no idea what is happening with this as it keeps randomly changing on browsers, working one time I try and then not, without me having changed any code. It's showing entirely wrong in Dreamweaver, and I am pulling my hair out in confusion at this point.

I am trying to make a responsive page with a black background and then a white space in the middle for the content. The content is where the issue is happening - using col-md and videos. I don't have any issues if I use text in the col-md, or if I use videos not in the col-md, but when I use the videos in the col-md, the content divs ignore the videos and they go over the white area and into the black background. Dreamweaver is also randomly resizing the videos (something I have NEVER seen it do) for no reason at all (I do not change the size of the window, just clicking away or opening it again and the videos can be entirely different sizes than they were before - no coding changes).

I'm on an extremely tight deadline and at my wit's end to solve this! I would appreciate any and all help!

Note: I am 100% self-taught. While I have been able to figure out enough to get this far, please feel free to "talk down to me" so I can be sure to follow. Thanks!

*This is not the video I am using on the site, just a placeholder:

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;
}

Thank you.

 

[OldMan]

Missing a closing bracket here:
<div class="container theme-showcase" role="main"<h1>Text</h1>
After the words
role="main"

Might want to rethink this.

 

[LKinneyX23]

I must have accidentally deleted it somehow when I posted it on here, it is there on my actual page.

 

[LKinneyX23]

Could the issue be because of the col-md? If I resize the window, small-medium and everything works fine. Bigger - that's when the problem happens. But I thought "md" would apply to larger sizes as well. Is that not right? Or should I also put in the large col code?