Bootstrap columns cause horizontal scrollbar

Question

At the "My Work" section of this website: Website

something is causing it to be too wide.

When you hover over a project (or trigger the :hover state on the <div class="projectbox"> and look at the project icons (eye, github and images) the last project's "images" is what causing it I think.

However, I do not know why this is. Should I just remove the padding from these buttons? I feel like that's kind of not what you're supposed to be doing. (If the padding is even what's causing it to happen).

Relevant code:

Answer 1

Horizontal scrollbars are usually caused by using the Bootstrap grid incorrectly.

The solution proposed by Ben Goossens is a hack and should be avoided because it makes the use of Bootstrap pointless. Use Bootstrap as intended and you won't need any hacks or custom css gymnastics.

Here's what you need:

1) .container div

2) .row div

3) .col div

That's the "holy trinity" you need in order for the Bootstrap grid to work properly.

Always put all of your normal content into Bootstrap columns (which in turn go into a row, which goes into a container) and you won't have any horizontal scrollbar issues.

The Bootstrap rows are designed to work with columns together. If you leave one of those 2 out, you're gonna run into issues.

Answer 2

A dirty little trick worked for me. You could add another 12 column grid before .row :

<div class="col-md-12">
    <div class="row">
        <div class="col-md-12">
    </div> 
</div>