Как отделить навигацию от заголовка

Question

Ну! Я написал код для заголовка со светло-голубым цветом, ширина фона 100% и высота 450 пикселей ниже метки nav. Я также закрыл тег nav.

В идеале ширина синего фонового заголовка 100% и высота 450 пикселей должна отображаться под навигацией и логотипом в результате, но заголовок все еще берет навигацию внутри него? Почему это ? See full code here Я хочу вытащить светлый фон и отделить вышеперечисленные элементы навигации.

<div id="brand">Mustaqim Ahmed </div> 
<nav> 
<ul> 
    <li> <a href="#"> Portfolio </a></li> 
    <li> <a href="#"> Resume </a></li> 
    <li> <a href="#"> Behance </a></li> 
    <li> <a href="#"> Contact </a></li> 
</ul> 
</nav> 

<section id="header"> 

<div id="header"> 
</div> 
#brand 
{font-family: Roboto; 
font-size: 30px; 
font-weight: bold; 
line-height: 50px; 
color: #999; 
float: left; 
margin-left: 10px;} 




} 
#header{ 

background: lightblue; 
width: 100%; 
height: 350px; 



} 

nav { text-align: center; line-height: 50px; 

} 

nav ul { float: right; 

} 

nav li {display: inline; list-style: none; 

} 

nav a {text-decoration: none; font-family: Helvetica; padding: 10px 

} 

nav a:hover { 

} 

Answer 1

Использование overflow: hidden; для #header в CSS:

#brand { 
 
    font-family: Roboto; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    line-height: 50px; 
 
    color: #999; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
#header { 
 
    background: lightblue; 
 
    width: 100%; 
 
    height: 350px; 
 
    overflow: hidden; 
 
} 
 
nav { 
 
    text-align: center; 
 
    line-height: 50px; 
 
} 
 
nav ul { 
 
    float: right; 
 
} 
 
nav li { 
 
    display: inline; 
 
    list-style: none; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    font-family: Helvetica; 
 
    padding: 10px 
 
}

<div id="brand">Mustaqim Ahmed</div> 
 
<nav> 
 
    <ul> 
 
    <li> <a href="#"> Portfolio </a> 
 

 
    </li> 
 
    <li> <a href="#"> Resume </a> 
 

 
    </li> 
 
    <li> <a href="#"> Behance </a> 
 

 
    </li> 
 
    <li> <a href="#"> Contact </a> 
 

 
    </li> 
 
    </ul> 
 
</nav> 
 
<section id="header"></section>