display: inline doesn't work properly with div

I'm a HTML/CSS beginner and currently I'm building a simple website. What I wanna do is I'd like to make 3 divs. One for the whole site, one for the content and one for the navigation list - row.

It should look like this:

_ _ _ _ _ _ (navigation list - row)

asdfwefwefwe

cofwerferwefw (content)

To recognize the divs I background-colored them. Whenever I use display-inline it looks like this. whole site div(red colored), main content(orange colored)

http://ift.tt/1Ildxtp

When I use display: inline-block whole site div(red colored), main content(orange colored), navigation list - row(blue colored)

http://ift.tt/1GEVdpE

Now it works but I want a navigation - row bar and not a ranked list but I don't know how to do it.

Here is my css for the navigation list - row:

.navigationlist{
    height:20%;
    width:100%;
    display:inline-block;
    background-color:blue;
}

Thank you very much for reading and for hopefully good answers.