Помощь с версткой меню

пытаюсь верстать свой первый шаблон, возникла проблема с меню, лого должно быть четко посредине, а по бокам меню, но лого уходить чуть влево и не стоит чисто посредине, помогите решить проблему, что я сделал не так? Пытался по-разному менять, ставить, но что-то никак не дойдет до меня

<!-- Header -->
<header class="header">
    <div class="container">
        <div class="header__inner">
            <nav class="nav">
                <a class="nav__link" href="#">Home</a>
                <a class="nav__link" href="#">About Us</a>
                <a class="nav__link" href="#">Team</a>
            </nav>

            <div class="header__logo">
                <img src="img/logo.png" alt="">
            </div>

            <nav class="nav2">
                <a class="nav__link" href="#">Services</a>
                <a class="nav__link" href="#">Block</a>
                <a class="nav__link" href="#">Contact Us</a>
            </nav>
        </div><!-- header__inner -->
    </div><!-- container -->
</header>

/*Header*/
.header {
    width: 100%;
    height: 54px;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header__inner {
    display: flex;
    justify-content: center;
}

.header__logo {
    margin: 0 60px;
}

/*Nav*/
.nav {
    display: flex;
    font-size: 13px;

    padding: 23px 0;
}

.nav2 {
    display: flex;
    font-size: 13px;

    padding: 23px 0;    
}

.nav__link {
    margin-right: 45px;

    font-family: 'Roboto', sans-serif;
    color: #010101;
    text-decoration: none;
    opacity: 0.65;

    transition: opacity 0.1s linear;
}

.nav__link:last-child {
    margin-right: 0;
}

.nav2 .nav__link:last-child {
    margin-right: 0;
}

.nav__link:hover {
    opacity: 1;
    text-decoration: underline;
}