Hi so I'm trying to align my navigation menu where the links align on one line with each other. But instead of aligning they are stacking. I'm currently coding in dreamweaver. I don't know what's going on.

Here is my css 

```css
body, html {
   margin: auto;
   width: 100%;
   height: 100%;
}

.header {
   width: 100%;
   height: 100%;
   background: url("") no-repeat;
   display: block;
}

.header > .nav-container {
   width: 100%;
   height: 50px;
   padding-top: 0px;
   display: block;
}

.header > .nav-container > .logo {
   width: 100%;
   max-width: 196px;
   display: inline-block;
   margin-left: 20px;
   background: #000;
}

.header > .nav-container > .navigation {
   display: inline-block;
   width: 60%;
   background: #000;
}

.nav-container > ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
}

.nav-container > li {
   float: left;
   display:inline-block;
}

.nav-container > li a {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}

.nav-container > li a:hover {
   background-color: #111;
}

.nav-container > .active {
   background-color: #4CAF50;
}

```

and the html

```html
<div class="header">
    <div class="nav-container">
    <div class="logo">
        <img src="C:\Users\Terrell\Documents\Designs\GetVersed\site\versedlogo.png">
    </div>

<!-- Naviagation -->
    <div class="navigation">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
       </ul>
    </div> 
<!-- End Navigation -->

</div>

```

Can anyone explain to me what I am doing wrong. 

I think this is the simplest way that I can break down what i'm asking for this site is asking me to write more because it's so much code here so this is just exrta writing.