¿Cómo hago para que los sprites de mi imagen se sienten juntos?

Estoy tratando de hacer un pie de página con íconos de redes sociales. Sin embargo, no sé cómo hacer que los íconos se coloquen uno al lado del otro. Están solo en el costado y alineados verticalmente (idek cómo alinearlo en el centro). Los quiero íconos en los íconos en el centro y uno al lado del otro.

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;
    }
Answer

Podrías hacer algo como esto. Las cajas flexibles son realmente útiles.


<html>
    <style>
    .footer {
        display: flex;
        gap: 20px; /* Here you can specify a gap between the child elements*/
    }

    .footer img {
        width: 30px;
    }
    </style>
    <body>
        <div class="footer">
            <img src="../images/someicon1.png"></img>
            <img src="../images/someicon2.png"></img>
            <img src="../images/someicon3.png"></img>
            <img src="../images/someicon4.png"></img>
            <img src="../images/someicon5.png"></img>
        <div>
    </body>
</html>
Nuevo colaborador
Robiot is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.