CSS вопрос заголовка в html5

Question

<header id="header"> 
    <img src="http://s30.postimg.org/rlkl06s9d/logo.jpg" alt="logo" id="logo"> 
    <h1>The Articles</h1> 
    <nav class="header-nav"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#"> Articles </a></li> 
    </ul> 
    </nav> 
</header> 

CSS:

#header{ 
    margin:10px; 
} 

#logo 
{ 
    padding-bottom: 40px; 
    border-bottom: solid 2px #CCC; 
} 

Здесь заголовок «Статьи» и навигации необходимо разместить на одной линии и навигации необходимо разместить на правой стороне страницы.

Мне нужно так:

The articles              Home  Articles 

Могу ли я узнать, что это точное свойство CSS, чтобы исправить это?

Answer 1

Вот один из вариантов.

JSfiddle

#header h1 { 
    float: left; 
} 
#header nav { 
    float: right; 
} 

#header nav li { 
    display: inline-block; 
} 

Answer 2

Обновить ваш CSS, как показано ниже.

#header h1{float:left;} 
#header nav.header-nav{float:right;} 
#header nav.header-nav li{display:inline-block;} 

DEMO