无法使html看起来像我想要的

我在定位我想要的位置时遇到问题。这是我目前的代码：

<header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="canvas.html">Canvas</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
        <div id="banner">
            <div id="overlay">
                <h1>ABOUT</H1>
            </div>
        </div>


</header>

这就是我想要的样子

下面是它当前的样子

您有一个div id=“overlay”，它根本没有被设置样式。 你有一个关于CSS的问题，它根本没有被使用

---

这就是你问题的根源——我想先用id=“overlay”将div改为id=“about”。

谢谢，我不敢相信我漏掉了。别担心，请将答案标记为已接受。p、 你可能会发现这个网站很有用：jsfiddle.net——你可以创建HTML/CSS，并在这里用一个独特的URL共享它。

/*navigation bar*/

nav {
    text-align: center;
}

nav ul {  
        list-style-type: none;
        margin: 0;
        padding: 0;
}

nav ul li {
    display: inline-block; 
    text-align: center;
}   

nav a {
    line-height: 100px;
    letter-spacing: 2px;
    font-size: 11px;
    color: #000000;
    display: block;
    width: 100px;
    position: relative;
    text-decoration:none
}
a:hover { 
        border-bottom: 3px solid black;
    margin-bottom: -3px;
    color:#000000; 
}

/*header*/

#banner {
    width: 1900px;
    height: 500px;
    margin-top: -100px;
    background-color: #C0C0C0;
    background-image: url('aboutheader.jpg');
}
#about{
    position: relative;
    top : 250px;
    background-color: rgba(255,255,255,0.4);
    font-size: 60px;

}