如何将导航与 header 分开

Question

嗯！我为 header 写了一个代码，在 nav 标签下方，浅蓝色背景颜色宽度为 100%，高度为 450px。我也关闭了导航标签。

理想情况下，蓝色背景 header 100% 宽度和 450px 高度应该出现在结果中的导航和徽标下方，但是 header 仍然把导航放在里面吗？这是为什么呢？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

在 CSS:

中对 #header 使用 overflow: hidden;

#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>

如何将导航与 header 分开

How to separate navigation from header

html

css

navigation

list