Flexbox is not perfecly centereing my NAV

Question

Here you can see its not perfectly centered

My navigation wont center correctly horizontally while using flexbox as shown in the picture, ive tried everything i know to center it, but i cant seem to figure it out.

Could someone please help me? :D

        <header>
            <nav>
                <img class="Logo" src="images/Logo" alt="RPN Logo">
                <a class="nav_1" href="index.html">RPNorge</a>
                <a class="nav_2" href="regelverk.html">Regelverk</a>
                <a class="nav_3" href="spillerguide.html">Spillerguide</a>
                <a class="nav_4" href="whitelist.html">Søk Whitelist</a>
            </nav>
        </header>

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav > a {
    text-decoration: none;
    color: #0F0326;
    text-transform: uppercase;
    font-size: 20px;
    align-self: flex-end;
    margin-bottom: 5px;
}

.Logo {
    width: 100%;
    max-width: 125px;
    height: auto;
    order: 3;
    margin-bottom: -70px;
    z-index: 1;
}

.nav_1,.nav_2,.nav_3,.nav_4 {
    cursor: pointer;
}

.nav_1 {
    order: 1;
    margin-right: 2rem;
}

.nav_2 {
    order: 2;
    margin-right: 1rem;
}

.nav_3 {
    order: 4;
    margin-left: 1rem;
}

.nav_4 {
    order: 5;
    margin-left: 2rem;
}

Tried to center the NAV, did not work properly

Answer 1

You mean vertical centering? It's because you place elements to bottom:

nav > a {
    ...
    align-self: flex-end;

just change it to:

nav > a {
    ...
    align-self: center;

and it should work.