Trouble aligning columns with Bootstrap 4 - html

Question

I am studying web design and making a mock website at the moment, I am very new to bootstrap, css and html and am not sure where I am going wrong, I am starting to pull my hair out as have been working on this all morning and getting nowhere so I'm hoping you guys can help me. I have been trying to align the text portion of my div to the right of the videos. I have managed to get it over to the right but not up alongside it so it's all inside the background container. It looks to me as though it could be an issue with the columns as the video columns stretch right across and I wonder if they are preventing the last one from being able to move up. I hope this makes sense.
I have tried different display and float options and separating and blending rows but don't seem to be winning.
HTML Code and CSS below that:
<!--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;
}
enter image description here

Answer 1

Bootstrap's grid system is based on a 12-column grid. If you want content to be side-by-side on the same row, the column classes need to add up to a number equal to (or less than) 12. Right now, in that row you have a 4, 4, and 8—which adds up to 16:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
If you're going for a layout where the first two columns take up a quarter of the row, and the second takes up a half, use 3 + 3 + 6 = 12 instead:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-6"></div>
</div>
</div>
(Also, don't forget to close that <strong> tag.)