Enfold Social Icons

HI.

I made my own social icons for my site here: http://lizybloomdesigns.com/zemasfoods3/

I inserted the code below into custom.css based on information I read in other posts. But when you hover over my images, they move slightly. Is there a way to fix this?

Thanks
Lizy Bloom

#top .social_bookmarks_facebook {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/facebook.png) no-repeat center;
}

#top .social_bookmarks_facebook:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/facebook_hover.png) no-repeat center;
}

#top .social_bookmarks_facebook a {
text-indent: -9999px;
}

#top .social_bookmarks_pinterest {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/pinterest.png) no-repeat center;
}

#top .social_bookmarks_pinterest:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/pinterest_hover.png) no-repeat center;
}

#top .social_bookmarks_pinterest a {
text-indent: -9999px;
}

#top .social_bookmarks_twitter {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/twitter.png) no-repeat center;
}

#top .social_bookmarks_twitter:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/twitter_hover.png) no-repeat center;
}

#top .social_bookmarks_twitter a {
text-indent: -9999px;
}

#top .social_bookmarks_linkedin {
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/link.png) no-repeat center;
}

#top .social_bookmarks_linkedin:hover a {
color:#fff;
background: url(https://lizybloomdesigns.com/zemasfoods3/wp-content/uploads/social/link_hover.png) no-repeat center;
}

#top .social_bookmarks_linkedin a {
text-indent: -9999px;
}

#top .social_bookmarks {
    height: 35px;
    margin: 0 0 0 900px;
    z-index: 150;
}