Having an issue with the div extending beyond the container in Bootstrap 4. When a green div reaches the edge of the page, instead of being cut off it causes a horizontal shift in the page layout. How can this be avoided?
Appreciate any assistance.
Live example: https://jsfiddle.net/Cedec/mu2f0whr/
#section2 img {
float:right;
}
#section2 {
margin-top:100px;
}
#section2 h2 {
color: #323232;
font-size: 70px;
font-weight: 800;
float: left;
line-height: 80px;
margin-top: 70px;
}
#section2 p{
color: #494e53;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
float: left;
margin-top: 30px;
}
.txt2 {
margin-left: 50px;
}
.bg2{
background-color: #00a998;
height: 320px;
z-index: -5;
margin-top: -550px;
margin-left: 100px;
}<section id="section2">
<div class="container">
<div class="row">
<div class="col-lg-5">
<img src="https://image.ibb.co/hGq0Rd/111.png" alt="">
</div>
<div class="col-lg-7">
<div class="txt2">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ...
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 bg2"></div>
</div>
</div>
</section>