Flexbox 没有完全集中我的资产净值

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.