How to remove this horizontal scrollbar in Bootstrap 3
Writing:
html, body {
max-width: 100%;
overflow-x: hidden;
}
in your CSS, is a way to solve this issue
Just copy this code to your CSS, it will disable your horizontal scroll bar.
body {overflow-x: hidden;}
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".