horizontal scroll issue with full width layout

[thomcheezy]

still facing the horizontal scroll issue orignaly reported here: https://github.com/kristoferjoseph/flexboxgrid/issues/144

using container-fluid around my row but removed the 16px padding to have a full width layout. without removing the padding of container-fluid, there is no horizontal scroll.

my code:

<div class="container-fluid">

<div class="row middle-sm">
  <div class="col-xs-12 col-sm-7">
    <div class="box spaced-default">
      <h2>Fühl dich wie Zuhause</h2>
      <p class="center">Dein Damen und Herren Coiffure in Wettingen. Geniesse das entspannte und lockere Ambiente bei einem Espresso und freue dich auf einen frischen und modischen Haarschnitt. Gianni arbeitet mit zusammen Trinity Haircare sowie Haarsana und gibt regelmässig Workshops in der Schweiz und im Ausland. Deine Haare - bei uns in guten Händen.
      </p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-5">
    <div class="box">
     <img class="teaser" src="/assets/images/home_salon.jpg">
     <a class="btn btn-text btn-absolute" href="/produkte">
      <span class="center">Salon</span>
    </a>
  </div>
</div>

</div><!-- close container fluid -->

[thomcheezy]

temporary fix with:

body {
    overflow-x: hidden;
}
.container-fluid{
    padding-left: 0;
    padding-right: 0;
}

[imevro]

Can you make a demo on jsfiddle?

[thomcheezy]

there u go https://codepen.io/thomcheezy/project/editor/AQbbQR#0 but while investigate into that one, I found the problem myself. while removing padding on the container, the negative margin on the row and the padding on the cols, causes this horizontal scroll. so the question now is: how to properly flush all margin and paddings for the grid, if you want to have a full width layout/design, without any maring on the sides. is there any solution from your side or should I overwrite on my own?

[mbomfim33]

Seems to be a reoccurrence of https://github.com/kristoferjoseph/flexboxgrid/issues/144.

I've tested with row start-xs main, and the only fix I could find was wrapping all up in a container, then adding 100% width + max-width: calc(100% - 1em) to it, as described by stephantabor.

[maximeoger]

adding max-width: calc(100% - 1rem) to parent element worked fine for me. Thanks 👍

[joeygallegos]

Will a fix ever be implemented? Should be merged into the master

[shanksssss]

Just add OVERFLOW-X: HIDDEN , make it simplier dont touch the container , rows , or cloumns

Let me know if it FIX? :)