Problema na Estilização do menu

Boa noite pessoal Estou tendo um problema que é o seguinte.

Quando eu vou estilizar o menu, os links do meu menu passam a ficar um embaixo do outro, sendo que deveria continuar igual estava antes, um ao lado do outro.

Já conferi todo o código para ver se não havia errado em algo, porém está tudo correto.

Antes de utilizar a estilização estava normal, certinho como deveria ser, porém quando estilizei o menu ele não manteve. (Segue o código sass abaixo)

.header { font-family: Arial, Helvetica, sans-serif;

&__logo {
    text-align: center;
}

&__img {
    max-width: 250px;
}

.menu {
    &__list {
        display: flex;
        justify-content: center;
        border-top: 1px solid $ligth-grey;
        border-bottom: 1px solid $ligth-grey;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        padding: 20px 0;
    }

    &__links {
        position: relative;

        &:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: -3px;
            margin: auto;
            height: 15px;
            width: 1px;
            background-color: $ligth-grey;
        }
    }

    &__link {
        padding: 0 25px;
        color: $dark-grey;

        &:hover {
            color: $purple;
        }
    }       
}

}