Images won't align together horizontally

Here is my CSS inside my child theme. The goal is two have a slide effect on my social links. I only have a facebook image ready right now and I’m trying to test the appearance of my “social menu”. Instead of the images lining up horizontally they are lining up in a square which you can see in the image link below.

View post on imgur.com

.facebook-hover {
    background-image: url('wp-content/uploads/2016/04/facebook-hover-e1461988191126.png');
}

.social-slide {
	/*background-image: url('path/to/image.png');*/
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-slide:hover {
	background-position: 0px -48px;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Here is the html, I have this code within a SiteOrigin Editor widget in a SiteOrigin pagebuilder row.

<div class="facebook-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>

Any help would be greatly appreciated!!!