title: Offsetting an element gives me the scrollbars but not the padding
body: <p>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?</p>
  
  <p>Code:</p>
  
  <pre><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 &gt; div {
    padding: 5.5%;
    position: relative;
    width: 150px;
    min-width: 150px;
    top: -240px;
    border-radius: 5%;
  }
  
  .chat_container &gt; 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
  }
  
  &lt;div class="row"&gt;
  &lt;div class="col col-12  background_row"&gt;
    &lt;h2&gt;Our customers happily shares their experiences...&lt;/h2&gt;
    &lt;section class="references"&gt;
    &lt;div class="profile_container"&gt;
    &lt;div class="cycle"&gt;&lt;/div&gt;
      &lt;div class="cycle"&gt;&lt;/div&gt;
        &lt;div class="cycle"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="chat_container"&gt;
      &lt;!--&lt;img src="images/chat.png" width="9%"&gt;&lt;/img&gt;
          &lt;img src="images/chat.png" width="9%"&gt;&lt;/img&gt;
              &lt;img src="images/chat.png" width="9%"&gt;&lt;/img&gt;--&gt;
              &lt;div&gt;&lt;p&gt;Amazing product!&lt;/p&gt;&lt;/div&gt;
              &lt;div&gt;&lt;p&gt;I love it!&lt;/p&gt;&lt;/div&gt;
              &lt;div&gt;&lt;p&gt;So good so far. recommend really &lt;/p&gt;&lt;/div&gt;
            &lt;/div&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>