css hover creating border but pushing content

Another solution with less code:

.hover-border:hover{
  box-shadow: inset 0 0 0 3px #3a3a3a;
}

The best solution to these issues is to use the box-sizing:border box property

* {box-sizing:border-box;}

Then elements will retain whatever size you define but it will now INCLUDE borders and padding.

Personally - I go with something along the lines of:

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

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

Related