How do I make my image sprites sit beside together?

I'm trying to make a footer with social media icons. However, I don't know how to make the icons sit beside each other. They're just in the side and vertically aligned (idek how to align it in the center). I want them icons in the icons in the center and side-by-side.

HTML :

<div class="footer1">
    <div class="fb"><a href="#"></div>
    <div class="ig"></div>
    <div class="yt"></div>
    <div class="twt"></div>
    <div class="pin"></div> 
</div>

CSS :

.fb {
        background: url('../images/sites.png') no-repeat -79px -109px;
        width: 302px;
        height: 302px;
    }

    .ig {
        background: url('../images/sites.png') no-repeat -459px -110px;
        width: 307px;
        height: 307px;
    }

    .yt {
        background: url('../images/sites.png') no-repeat -852px -115px;
        width: 299px;
        height: 299px;
    }

    .twt {
        background: url('../images/sites.png') no-repeat -1244px -114px;
        width: 295px;
        height: 293px;
    }

    .pin {
        background: url('../images/sites.png') no-repeat -1632px -112px;
        width: 293px;
        height: 293px;
    }