позиционирование «логотип» и «NavBar» в заголовке

Question

Это убивает меня в течение нескольких часов уже: '(Может кто-нибудь помочь мне расположить логотип и Navbar внутри заголовка ???

Я пытаюсь поставить «логотип» внутри заголовка (слева) и «navbar» внутри заголовка (справа), но даже если я пробовал много разных свойств, мой навигатор всегда находится вне контейнера заголовка ... Заголовка должна быть исправлена.

http://jsfiddle.net/L7kPu/10/

<header> 
     <a href="#" id="logo">Logo</a> 

        <ul id="nav" class="nav"> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#services">Services</a></li> 
         <li><a href="#portfolio">Portfolio</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 

</header> 
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'> 

html, body{ 
    margin:0px; padding:0px; height: 100%; } 

section { 
    height: 100%; 
} 

header{ 
    z-index: 1; 
    position:fixed; 
    width:100%; 
    background:rgba(0,0,0,0.1); 
} 

header ul{ 
    float:right; 

} 

header ul li{ 
    display: inline; 
    float:left; 

} 
header a{ 
    color:white; 
    background:rgba(0,0,0,0.1); 
    display:inline-block; 
    padding:0px 30px; 
    height:60px; 
    line-height:60px; 
    text-align:center; 
    font-family: 'Roboto Slab', serif; 
    text-decoration:none; 
    text-transform:uppercase; 
    letter-spacing:2px; 
    font-weight:700; 
} 

Answer 1

Ваш ul имел поля и отступы :)

Working Fiddle

header ul{ 
    float:right; 
    padding: 0; 
    margin: 0; 
} 

header ul li{ 
    display: inline; 
    float:left; 
} 
header a{ 
    color:white; 
    background:rgba(0,0,0,0.1); 
    display:inline-block; 
    padding:0px 25px; 
    height:60px; 
    line-height:60px; 
    text-align:center; 
    font-family: 'Roboto Slab', serif; 
    text-decoration:none; 
    text-transform:uppercase; 
    letter-spacing:2px; 
    font-weight:700; 
} 

Я также изменил левый и правый отступы на header a для скрипки.

Answer 2

Здесь:

header ul 
{ 
float:right; 
    margin: 0; 
} 

header ul li 
{ 
display: inline; 
float:left; 
margin: 0; 
} 

Также очистить ваш код немного:

http://jsfiddle.net/L7kPu/17/

Answer 3

Updated Fiddle Вот измененное CSS для вашего кода:

#logo { 
    float: left; 
    position: aboslute; 
} 
#nav { 
    white-space: nowrap; 
    margin-top: 0; 
    margin-right: 0; 
} 
header { 
    z-index: 1; 
    position:fixed; 
    width:100%; 
    background:rgba(0, 0, 0, 0.1); 
    height: 60px; 
}