Why are these item's not displaying inline?

Question

I'm working on my header, it's very simple, a logo to the left which is floating left and right next to it, I've been trying to center my elements in the middle of the header.

Everything is working fine, except for some reason the image and elements are not displaying next to eachother.

 nav {
        background-color: #58BEA5;
        margin: 0;
        padding: 0;
        margin-bottom: -1px;
    }

#logo {
        margin-top: 5px;
        margin-left: 15px;
        float: left;

    }

div.nav-container {
    margin: auto;
    width: 800px;
    text-align: center;
    background-color: blue;
}

a.navitems {
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 1%;
    margin-left: 5%;
}

a.navitems:hover {
    background-color: #3ea38a;
}

#mobbutton {
        visibility: hidden;
        height: 5px;
        margin-top: 1.5%;
    }

**HTML:**

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        </div>
            <div class="inlineshit">
            <a class="navbar-brand" href="#"><img id="logo" src="img/winkelgidsnulogo.png" alt="logo"></a>
            <img src="img/mobbutton.png" id="mobbutton" alt="mobile button">
            <div class="nav-container">
            <a href="#" class="navitems">HOME</a>
            <a href="#" class="navitems">HANDELAARS</a>
            <a href="#" class="navitems">MEMBERCENTER</a>
            <a href="#contactphone" class="navitems">OVER ONS</a>
            <a href="#" class="navitems">CONTACT</a>
            </div>
                </div>
        </div>
</nav>

Answer 1

 nav {
        background-color: #58BEA5;
        margin: 0;
        padding: 0;
        margin-bottom: -1px;
    }

#logo {
        margin-top: 5px;
        margin-left: 15px;
        float: left;

    }

div.nav-container {
    margin: auto;
    width: 800px;
    text-align: center;
    background-color: blue;
display:inline;
}

a.navitems {
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 1%;
    margin-left: 5%;
}

a.navitems:hover {
    background-color: #3ea38a;
}

#mobbutton {
        visibility: hidden;
        height: 5px;
        margin-top: 1.5%;
    }

**HTML:**

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        </div>
            <div class="inlineshit">
            <a class="navbar-brand" href="#"><img id="logo" src="img/winkelgidsnulogo.png" alt="logo"></a>
            <img src="img/mobbutton.png" id="mobbutton" alt="mobile button">
            <div class="nav-container">
            <a href="#" class="navitems">HOME</a>
            <a href="#" class="navitems">HANDELAARS</a>
            <a href="#" class="navitems">MEMBERCENTER</a>
            <a href="#contactphone" class="navitems">OVER ONS</a>
            <a href="#" class="navitems">CONTACT</a>
            </div>
                </div>
        </div>
</nav>

 nav {
        background-color: #58BEA5;
        margin: 0;
        padding: 0;
        margin-bottom: -1px;
    }

#logo {
        margin-top: 5px;
        margin-left: 15px;
        float: left;

    }

div.nav-container {
    margin: auto;
    width: 800px;
    text-align: center;
    background-color: blue;
}

a.navitems {
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 1%;
    margin-left: 5%;
}

a.navitems:hover {
    background-color: #3ea38a;
}

#mobbutton {
        visibility: hidden;
        height: 5px;
        margin-top: 1.5%;
    }

**HTML:**

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        </div>
            <div class="inlineshit">
            <a class="navbar-brand" href="#"><img id="logo" src="img/winkelgidsnulogo.png" alt="logo"></a>
            <img src="img/mobbutton.png" id="mobbutton" alt="mobile button">
            <div class="nav-container">
            <a href="#" class="navitems">HOME</a>
            <a href="#" class="navitems">HANDELAARS</a>
            <a href="#" class="navitems">MEMBERCENTER</a>
            <a href="#contactphone" class="navitems">OVER ONS</a>
            <a href="#" class="navitems">CONTACT</a>
            </div>
                </div>
        </div>
</nav>