Social Media Buttons not next to each other!

Hi!

So my social media buttons just do not want to go beside one another… I am currently using a hover effect CSS code for them, like this:

.twitterLink {

display: inline-block;
float: left;
width: 144px;
height: 72px;
background: url('https://i46.photobucket.com/albums/f146/xodee101/Twitter3_zpsd16c0b59.png') bottom;
text-indent: -99999px;
margin-right: 1px;

}

.twitterLink:hover {

background-position: 0 0;

}

.instagramLink {

display: inline-block;
float: left;
width: 144px;
height: 72px;
background: url('https://i46.photobucket.com/albums/f146/xodee101/Instagram3_zpsadb83284.png') bottom;
text-indent: -99999px;
margin-right: 1px;

}

.instagramLink:hover {

background-position: 0 0;

}

.tumblrLink {

display: inline-block;
float: left;
width: 144px;
height: 72px;
background: url('https://i46.photobucket.com/albums/f146/xodee101/tumblr3_zpsa95a77c3.png') bottom;
text-indent: -99999px;
margin-right: 1px;

}

.tumblrLink:hover {

background-position: 0 0;

}

I have tried everything, from “display: inline” to “float: none (or right)” and nothing seems to be working!!! Can anyone tell me what I’m doing wrong here and please help me? ??