How to remove this horizontal scrollbar in Bootstrap 3

Solution 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

<div class="wrapper container">
    <div class="row">
        ...
    </div>
</div>

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".

Solution 2:

Just copy this code to your CSS, it will disable your horizontal scroll bar.

body {overflow-x: hidden;}

Solution 3:

Writing:

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

in your CSS, is a way to solve this issue