CODEWITHSUNDEEP
csstwitter-bootstrap
bethabernathy
bethabernathy

Reputation: 53

Remove Horizontal Scroll Bar

I am trying to remove the horizontal scroll bar that is appearing on the website that I am working on at Real Estate Website Scroll Bar Issue

I think it might be in the bootstrap.min.css file:

{.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}

But, that is a reference to a table. So I am not sure how to get rid of the scroll bar. Any help would be great. Thanks, Beth

Upvotes: 1

Views: 9815

Answers (2)

Michael Coker
Michael Coker

Reputation: 53709

You have .row classes that are not a child of .container or .container-fluid. One is .containerNew -> .row and another is #about -> .row. Bootstrap requires .row be a direct child of .container or .container-fluid because .row has a negative left/right margin that works within left/right padding in .container and .container-fluid. So the negative margins on .row are creating the horizontal scrollbar.

You also have 2 #about sections - an ID can only exist on the page once.

Upvotes: 1

Agu Dondo
Agu Dondo

Reputation: 13619

You can either set:

body{
    overflow-x:hidden;
}

Or fix what is causing the grid system to overflow. I see you are overriding the default bootstrap grid styles. I suggest you leave bootstrap to handle the rows and columns widths and paddings.

Upvotes: 5

Related Questions