CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Brian Ogden
Brian Ogden

Reputation: 19212

Horizontal scroll bar displays on website even after CSS Reset

I have superfluous/erroneous width on my website even after a CSS Reset that displays the horizontal scroll bar. I am using Boostrap 3.0 and can't seem to find any broken HTML, notice too it is on every page of the website. I tried a "heavy" CSS reset and that didn't even fix the issue.

This is the website.

Upvotes: 1

Views: 265

Answers (3)

kevinius
kevinius

Reputation: 4620

The problem has to do with not using the bootstrap container class to create your site in.

<div class="content container"> in the footer fixes the problem without doing anything else.

http://getbootstrap.com/css/#overview-container

Bootstrap adds a negative left and right margin on .row classes to counter-act with the 15px padding added to the .container class. If you don't use the .container class you are left with the negative margin on your 100% width .row.

<footer role="contentinfo" id="footer">
            <div class="content container">
                <div class="row">

Upvotes: 1

JSW189
JSW189

Reputation: 6325

<div class="col-lg-2 col-sm-push-1"> has a width of 1197px, which is causing there to be extra white space on the right.

enter image description here

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29160

Check the width of your footer, containing How it Works and your social icons. My tools show its width exceeding the other elements.

enter image description here

Direct Image Link (Full Size)

Upvotes: 2

Related Questions