display: inline doesn't work properly with div

Question

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://puu.sh/iFyeC/a48443bc07.png

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

http://puu.sh/iFyil/40e73716e7.png

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.

Answer 1

Firstly, Use Home,Story,Hereos All in list tag!!

<ul>
<li>Home</li>
<li>Story</li>
<li>Hereos</li<
......
<ul>

And then Style Then element

li
{
display:inline;
padding:10px;
}

Your Out will be
http://myslambook.pe.hu/demo.png

Answer 2

 li { display: inline-block; border-radius: 5px; font-size: 0.4em; margin: 1% auto; padding: 1%; text-align: center; border: 2px solid #000; background-color: rgba(255, 255, 255, 0.7); } 

 <ul> <li>Hello</li> <li>Stack Overflow</li> <li>World</li> </ul> 

Answer 3

Apart from using the li and ul I will suggest you make use of the bootstrap navbar class whenever you have to create navigation bars. You can read on its advantages online ( http://getbootstrap.com/components/#navbar ) plus it will also allow you to highlight one of the li by default. In your case it would be something like.

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div>
            <ul class="nav navbar-nav">
                <li><a href="#">Hello</a></li>
                <li><a href="#">Stack Overflow</a></li> 
                <li><a href="#">World</a></li> 
            </ul>
        </div>
    </div>
</nav>