When i set these images position to fixed, they pile on top of each other

When i set these images position to fixed, they pile on top of each other

The css below is what I've applied to the Facebook, twitter, and Google
plus links, I've added to a website I'm making, I want to make it so that
when i scroll down on the website the Facebook, twitter, and Google plus
icons stay in the top, right hand corner of the screen. I added position:
fixed; to it and they stay in that corner when i scroll; however, they
pile on top of each other, this should come easy to me, but my brains
blank:
.facebook {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/fb.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.facebook:hover {
background-image: url('Styling-Images/bgcolor.png');
}
.twitter {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/tw.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.twitter:hover {
background-image: url('Styling-Images/bgcolor.png');
}
.gp {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/gp.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.gp:hover {
background-image: url('Styling-Images/bgcolor.png');
}