Inline-block doesn't mantain things on the same line

Question

I ran into this problem and have been trying to solve it for several hours. I have consulted dozens of other questions but none have solved my problem. I will explain it below.

I have this HTML div:

<div class="navigator">
        <h2>Logo</h2>
        <ul id="item">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div>

With this related CSS file.

* {
    margin: : 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

.navigator{
    display: inline-block;
    background: black;
    width: 100%;
}

.navigator h2{
    font-size: 35px;
    color: white ;
    text-align: center;
}

#item{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    vertical-align: top;
}

As a final result I would like to get the word "Logo" in the middle, and everything else near the right margin, in a row. The result I get is as follows:

The finishing touch would be to put the three lettering at the same height as "Logo", but I'm really struggling with that.