imagem do twitter fora do lugar

Boa noite! Minha imagem do twitter fica abaixo das outras imagens do instagram e do facebook, não sei o porque.

<footer class="rodape container">
                <img src="img/logo-apeperia.svg" alt="Logo da Apeperia" class="rodape__logo">
                <ul class="rodape__social">
                    <li><a href="#" class="rodape__midia"><img src="img/facebook.png" alt="Ícone do Facebook></a></li>
                    <li><a href="#" class="rodape__midia"><img src="img/twitter.png" alt="Ícone do Twitter"></a></li>
                    <li><a href="#" class="rodape__midia"><img src="img/instagram.png" alt="Ícone do Instagram"></a></li>
                </ul>
                <nav>
                    <ul class="rodape__navegacao">
                        <li class="rodape__link"><a href="#">Sobre</a></li>
                        <li class="rodape__link"><a href="#"></a>Planos</li>
                        <li class="rodape__link"><a href="#"></a>Blog</li>
                        <li class="rodape__link"><a href="#"></a>Destaques</li>
                        <li class="rodape__link"><a href="#"></a>Institucional</li>
                        <li class="rodape__link"><a href="#"></a>Contato</li>
                    </ul>
                </nav>
            </footer>
    </body>
</html>

`.rodape { display: flex; flex-direction: column; align-items: center;

background-color: var(--bg-rodape);

padding-top: 2.5rem;
padding-bottom: 2rem;

}

.rodape__social { display: flex; }

.rodape__midia { display: block;

width: 42px;
height: 42px;

margin: 2rem 1rem;

}

.rodape__navegacao { color: var(--branco); text-align: center; line-height: 3; }

.rodape__link { display: inline-block;

margin: 0 .5rem .7rem;

`

O codigo é o mesmo, porém o # dentro das aspas está vermelho e o HREF está em azul, e no código do instagram e facebook ocorre ao contrário, não sei o pq.