css hover creating border but pushing content

css hover creating border but pushing content

Situation
I'm currently building a site and desire to have some elements create a
border/outline upon hovering the mouse over them. This is simple enough to
make work. For reference, please see the staging site at Stagin area link.
I'm using the grid part of the latest bootstrap and the box-sizing model.
Issue
I find that upon hovering, the content below that which is being hovered
gets "pushed" far down below the next element. Using the stagin area as
reference, I can change the behaviour through CSS to fix this on the left
hand side or the right hand side but, not both at the same time.
Code
Here is a snippet of the CSS I use to make the effect:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
}
Using this method, anything but the first element behaves as expected. If
I try this next snippet, the first element works but, then the others
break:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
margin-top: -6px;
}
For the sake of clarification with regard to properties inherited, I have
set the margin/padding on the elements in question to '0 !important' for
standard behaviour until hover
Problem
How can I stop the element below from being pushed?