trying to align nav links with logo in bootstrap 4

I am having issues with aligning my navigation links with my logo. Currently, my logo is in the center of my navigation and the links for some reason are displaying above my logo rather than next to it. the image below shows my issue

I am trying to get it to look like this:

here is my header code:

  <header id="header" role="banner">
            <div class="header-inner">
                <nav class="navbar">
                    <div class="container text-xs-center">
                        <div class="navbar-nav">
                            <a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Our Team</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Media</a>
                            <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
                            <a href="#" class="nav-item-link nav-item nav-link">About Us</a>
                            <a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a>
                            <a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

and my css:

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
}

a.nav-item:hover{
    color:#000;
}

a.nav-item:hover{
    color:#000;
}

.navbar-nav{
    display:inline-block;
}

#donate{
    background-color: #7ED321;
    border-radius: 8px;
    padding: 15px;
}

#header{
    width:100%;
}

.header-inner{
    padding: 18px 0;
    width:100%;
}

any help would be appreciated!

try to do

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
    vertical-align:center;
}

If that doesn't work, then try adding line-height property to get it to the desired vertical position.