Problem z CSS

pytanie zadane 30 kwietnia 2018 w HTML i CSS przez Krzymado Początkujący (370 p.)
edycja 30 kwietnia 2018 przez Krzymado

Witam, nie wiem jak ustawić linki tak, żeby były po bokach równo ze środkiem loga a nie na dole jak to jest aktualnie, nie wiem czy to dobrze wytłumaczyłem.

 <footer>
        <div class="foot1"><a href="#">O mnie</a></div>
        <div class="foot1"><a href="#">Blog</a></div>
        <div class="foot2"><a href="index.html"><img src="photos/logo.png"</a></div>
        <div class="foot1"><a href="#">Cele</a></div>
        <div class="foot1"><a href="#">Kontakt</a></div>
    </footer>

*{
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Quicksand', Arial, Helvetica, sans-serif;
    font-size: 62.5%;
}

footer{
    text-align: center;
    background-color: rgb(68, 68, 212);
}

footer a{
    color:white;
    font-size: 2.125em;
    text-decoration: none;
}

footer .foot1{
    display: inline-block;
    margin-right: 1.5em;
    margin-left: 1.5em;
}

footer .foot1 a{
    transition: 0.5s background-size;
    background: linear-gradient(red, red) bottom / 0 .1em no-repeat;
}

footer .foot1 a:hover{
    background-size: 100% 0.1em;
}

footer .foot2 {
    display: inline-block;
}

footer .foot2 a{
    opacity: 0.8;
    transition: 1s;
}

footer .foot2 a:hover{
    opacity: 1;
}

footer img{
    width: 5em;
    padding: auto;
}