偏移元素会给我滚动条而不是填充

Question

出于某种原因，如果我偏移h2，即使是少数px或0.x％，滚动条也会显示在我的页面上，即使h2还有很多空间。但是当我添加padding-left时，滚动条将不会显示，一切都很好。我试图找到为什么这会发生使用开发工具，但没有成功。有什么想法吗？

代码：

h2 {
  font-family: "fira sans";
  color: #529aaf;
  position: relative;
  /*left: 50px; here if I leave left: x then I get scrollbars. If I change left to padding, I wont' get them.*/
}

.profile_container {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 200px;
}

.cycle {
  background: orange;
  height: 100px;
  width: 100px;
  min-width: 100px;
  margin-bottom: 10px;
  border-radius: 100%;
  background-image: url(images/8.jpg);
  background-size: cover;
  margin-right: 18%;
  margin-top: 10px;
}


.cycle:last-child {
  margin-right: 0;
}

.chat_container {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  /*position: absolute;
  top: 0;
  left: 0;*/

}

.chat_container img {
  padding: 5%;
  position: relative;
  width: 150px;
  min-width: 150px;
  top: -260px;
}

.chat_container > div {
  padding: 5.5%;
  position: relative;
  width: 150px;
  min-width: 150px;
  top: -240px;
  border-radius: 5%;
}

.chat_container > div {
  background: #e2e2e2;
  margin-right: 10px;
  margin-bottom: 10px;
}

p:last-child {
  margin-right: 0;
}

.partners_container {
  text-align: center;
  overflow: hidden;
}

.partners_container img {
  margin-top: 24px
}

<div class="row">
<div class="col col-12  background_row">
  <h2>Our customers happily shares their experiences...</h2>
  <section class="references">
  <div class="profile_container">
  <div class="cycle"></div>
    <div class="cycle"></div>
      <div class="cycle"></div>
    </div>
    <div class="chat_container">
    <!--<img src="images/chat.png" width="9%"></img>
        <img src="images/chat.png" width="9%"></img>
            <img src="images/chat.png" width="9%"></img>-->
            <div><p>Amazing product!</p></div>
            <div><p>I love it!</p></div>
            <div><p>So good so far. recommend really </p></div>
          </div>
</section>
</div>
</div>