Offsetting an element gives me the scrollbars but not the padding - html

Question

For some reason if I offset h2 even for few px or 0.x %, scrollbars shows up on my page, even tho there is still a lot of space left for h2. But when I add padding-left, scrollbars won't show up and everything is fine. I was trying to find why is this happening using dev tools, but no success. Any ideas?
Code:
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>