html - 如何将导航与标题分开

Question

嗯!我在 nav 标签下写了一段淡蓝色背景色宽度为 100%、高度为 450px 的标题代码。我也关闭了导航标签。

理想情况下，100% 的蓝色背景标题宽度和 450px 的高度应该出现在结果中的导航和 Logo 下方，但标题仍将导航置于其中？这是为什么 ？ 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>