I currently have two 6 column bootstrap divs positioned side by side within a row div. Both divs contain an image, with each image spanning half the width of the viewport. In the left column, above the image (set as a background via CSS), I want to place a header and a link within a container.
Issue
The container is not aligning correctly with the left margin of the text (contained in another container) that comes after the two 6 column bootstrap divs. Although I've added a left margin for the container, the alignment gets thrown off when the screen size changes. However, everything appears fine below a resolution breakpoint of 992px when the columns are stacked. Have I missed something or made an error somewhere?
I'm fairly new to this field, so any help would be greatly appreciated!! Here's the code:
#aboutus {
background-image: url("https://picsum.photos/946/381");
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
}<div class="row">
<div id="aboutus" class="col-lg-6">
<div class="container">
<h2 style="color: white;">About Us</h2>
<a class="small" href="#home" style="color: white;">Home</a>
<i style="color: white;" class="fa fa-angle-right"></i>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid w-100" src="https://picsum.photos/946/3...1" alt="">
</div>
</div>
<div class="container">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Dignissimos cupiditate ut nobis unde ipsa eius commodi,
praesentium eum. Natus, laborum illo est dolorem rem quos
ui ipsum nemo fuga. Odio, aut. Esse veniam quia corporis
dolor vitae totam.</p>
</div>