Left margin alignment of a container inside a 6 column bootstrap div

Question

I have two 6 column bootstrap divs side by side in a row div and both of the divs have an image to display where each image has a width of half the view-port. I have a header and a link to be placed in the left column above the image (I have the image set as background of the column via CSS). I have placed the header and the link in a container.

Problem

container doesn't align with the left margin of the text (inside a container) that follows the two 6 column bootstrap divs. I had set margin left for the container but the alignment goes off when the screen size is changed. But below 992px of resolution break-point everything is fine as the columns are stacked. Did I miss something or did I do something wrong?

I'm new to this trade so, help much 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/381" 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> 

Answer 1

Change col-lg-6 to some other responsive size.

In the example I changed it to col-6. See: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

 #aboutus { background-color: #e6603f; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; background-image:url(https://picsum.photos/946/381); } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div id="aboutus" class=" col-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-6"> <img class="img-fluid w-100" src="https://picsum.photos/946/381" 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> 

Answer 2

for small screen you need to use col-* class and after large screen you need to use col-lg-* class, for more info check this link

In your code i use col-12 and col-lg-6 so in large screen your two image show side by side and in small screen it show like up down manner

 #aboutus { background-color: #e6603f; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="row m-0"> <div id="aboutus" class="col-12 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-12 col-lg-6"> <img class="img-fluid w-100" src="https://picsum.photos/946/381" 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>