DIV вне контейнера

Question

У меня проблема с div, который выходит из контейнера. Когда зеленый div касается края страницы, страница не обрезает его, а добавляет горизонтальное смещение страницы. Я использую bootstrap4. Как этого избежать?

Спасибо за помощь.

Live: 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 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. </p>
            
            
          </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 bg2"></div>
        </div>   
      </div>
    </section>

Answer 1

Добавление overflow: hidden к #section2 скрывает все, что выходит за пределы вашего контейнера.

Answer 2

Если я правильно понимаю, проблема в том, что вы переопределяете col-lg-12 поля, и это нарушает его цель. вы должны иметь свой класс 'bg2' для div, как потомок этого col-lg-12, а также дать ему position: relative, чтобы он оставался на заднем плане.

https://jsfiddle.net/mu2f0whr/6/