How to remove this horizontal scrollbar in Bootstrap 3

Question

I\'ve got this irritating horizontal scroll on my bootstrap page. Can\'t figure out what is making it behave like this or what to do about it?

JsFiddle link: http:/

Answer 1

As per Bootstrap 3 documentation:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Therefore, add the class container to your .wrapper element.

Updated Example

    

        ...
    

As for an explanation, the .row class has -15px margins on each side.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

The .container class effectively displaces that with the following:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

In addition to reading the Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".