CSS Transition Help - Simple Problem, Simple Fix

TL;DR - Don't use padding on a:hover that will change the size of your element. Instead use a combination of padding of margin & padding on a.

Currently you are using margin for layout with your a elements and using padding to to give the "button"-look on :hover. However padding changes the size of the element and thus move the other content on the page.

#footer a { margin: 5px 10px 0px 10px; }
#footer a:hover { padding: 3px 5px; }

The solution is to remove the padding from elements on :hover instead start by applying padding to #footer a and then add in some margin to give the same layout.

#footer a {
 padding: 3px 5px;
 margin: 2px 5px 0px 5px;
}

Here's a codepen showing it in action. I use codepen because I prefer it's UX over jsfiddle.

Thanks a lot! I knew it was a simple fix. I've been coding since 10 am this morning without breaks so I guess it's good I had some fresh eyes look at this. =)