为什么这些项目没有内联显示？

Question

我正在处理我的 header，它非常简单，左侧有一个徽标，它在它旁边左右浮动，我一直试图将我的元素居中放置在header.

一切正常，除了由于某种原因图像和元素没有彼此相邻显示。

 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>

为什么这些项目没有内联显示？

Why are these item's not displaying inline?

html

css

inline

header

graphical-logo