Extra right space horizontal scroll and border width


ttri dot biz/test_sidebar

I can’t find what is creating the extra width adding a little horizontal scroll to the page.
It does so on firefox, and chrome basically at any width.
And while on firefox the tabs left border are at 19px as they should bein chrome they seem to be a couple pixels, behaviour that seems to be common on both browsers when resizing under 768px where toggle kincks in.
My monitor is 1280x1024

Thank you

I think it’s the left and right margins on the .row class. Removing them stops the H scroll.

In bootstrap rows (.row) have 15px negative left and right margins and it is these margins that cause the scrollbar. The reason for the negative margin is that all rows in bootstrap must be inside a .container parent which contains 15px left and right padding and thus creates a buffer for the negative margins to stay within the page. This is the way the bootstrap grid works and you should spend a few minutes or the bootstrap site reading about the grid or you wil run into this again.

You can of course over-ride the margins in specific cases but you should take care as the whole bootstrap gird is built on this function.

You can add the padding to your wrapper to offset the negative margins.

.fz-wrapper{padding:0 15px;}

Thank you both.

I totally overlooked that, due to the fact I started building from the wrong end.
Thank you for the reminder.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.