css hover creating border but pushing content

Question

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?

Answer 1

Personally - I go with something along the lines of:

.hover-border {
  border: 3px solid transparent;
  display: block;
}

.hover-border:hover {
  border: 3px solid #3A3A3A;
}