css - 页眉未正确拉伸(stretch)

Question

当我折叠我的网页时，我遇到了这个问题，页眉缩小而不是在整个页面上保持拉伸(stretch)。

在这种情况下，我真的不知道该发布什么代码。我尝试了各种方法来修复它，但似乎没有任何效果。有谁知道发生这种情况时发生了什么？这是我的标题 HTML 和 CSS:

#header {
  background-color: #C67171;
  width: 100%;
}
#headtop {
  text-align: right;
  width: 1000px;
  margin: 0 auto;
  vertical-align: middle;
  height: 58px;
}
a.nav {
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  color: #ffffff;
  line-height: 58px;
  padding: 20px 12px;

<div id="header">
  <div id="headtop">
    <a href="about.html" class="nav">About</a>
    <a href="gallery.html" class="nav">Gallery</a>
  </div>
</div>

不过，样式就差不多了，非常感谢任何帮助!

编辑解释代码结果的图片。

这是页面现在的样子。这就是我想要的样子。但出于某种原因，当我折叠页面时，我不断遇到上图中的问题。我不想将链接延伸到我的页面外部，这并不能解决我的问题。

Answer 1

试试这个 Fiddle

#header {
  background-color: #C67171;
  display:inline-block;
}
#headtop {
  text-align: right;
  width: 1000px;
  margin: 0 auto;
  vertical-align: middle;
  height: 58px;
}
a.nav {
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  color: #ffffff;
  line-height: 58px;
  padding: 20px 12px;

<div id="header">
  <div id="headtop">
    <a href="about.html" class="nav">About</a>
    <a href="gallery.html" class="nav">Gallery</a>
  </div>
</div>