标题不能正确拉伸

Question

当我崩溃我的网页时，我遇到了这个问题，标题缩小而不是在整个页面上保持延伸。

在这种情况下，我真的不知道要发布什么代码。我已经尝试了各种方法来解决它，似乎没有任何工作。有没有人知道发生这种情况后会发生什么？这是我的标题HTML和CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这对于造型来说非常重要，但是非常感谢任何帮助！

修改 图片解释代码的结果。

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

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>

Answer 2

问题是，当窗口显示大于1000px的屏幕时，您的页面似乎正常工作。当你缩小标题时，标题会因width: 100%;而缩小。

但随着我们变小，div #headtop将保持相同的大小width: 1000px;。因此标题会变小但子元素（#headtop）仍然会很大，导致您看到的滚动。

#header {
  background-color: #C67171;
  width: 100%;
}
#headtop {
  text-align: right;
  width: 100%;
  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>

---

以下是如何使链接远离两侧（请参阅注释以获取更多信息）。给#headertop一个最大宽度，然后给它一个80％的宽度，或者你想要的差距。

JSFIddle Here