Currently, I am delving into web design and working on a mock website. My knowledge of Bootstrap, CSS, and HTML is limited, which has led me to encounter some challenges. Despite dedicating the entire morning to this project, I find myself stuck with aligning the text section of my div to the right of the videos. While I've managed to shift it to the right, I'm struggling to position it alongside the videos within the background container. It appears that the column arrangement might be causing an issue since the video columns extend all the way across the page, potentially hindering the last one from moving up. I hope this explanation makes sense.
I've experimented with various display and float options, as well as tried separating and blending rows, but haven't made any significant progress.
Here's the HTML Code and CSS:
<!--CONTAINER MAIN ABOUT INFO-->
<div class="page-header">
<h2>About Us</h2>
</div>
<div class="container container-about">
<!--VIDEOS-->
<div class="row videos">
<div class="col-md-4 vid1">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/afRUIVxTGls" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-4 vid2">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/NNgRnJIjXM4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-8 about">
<p><strong>lorem epson etc</p>
</div>
</div>
</div>
<!--END OF MAIN ABOUT INFO-->
CSS:
.videos {
display: inline;
}
.about {
float: right;
}