html - 标签溢出到网站上的其他元素中

Question

我的 h1 标签应该类似于网页上显示的横幅框，但颜色背景却溢出到我上面的导航中。我的图形对齐也有问题。这个问题看起来很简单，所以我会在等待答案的同时尝试自己解决这个问题。我可能已经通过组合标签的内容找到了横幅的故障排除方法，但我想找到一种方法来像以前一样使用它。我很乐意为网站的任何部分提供 CSS 和/或 html。如果有任何帮助，我正在 Google Chrome 浏览器中使用 Adob​​e Dreamweaver CC 2018。感谢您的帮助。

代码

body {
  font-size: 1.1em;
  font-weight: normal;
  font-family: Georgia, Arial, serif;
  color: #DD847F;
  text-align: left;
  background-color: #F7E0C4;
  border-color: #B00F32;
  border-width: 10px;
  border-style: double;
  margin: 100px 200px;
  padding: 0px 0px;
}

h1 {
  font-size: 2.8em;
  font-weight: bold;
  color: #F7E0C4;
  text-align: center;
  font-family: Verdana, Arial, serif;
  border-left: 100px solid #B00F32;
  border-right: 100px solid #B00F32;
  border-bottom: 100px solid #B00F32;
  border-top: 100px solid #B00F32;
  background-color: #B00F32;
  padding-top: 0px;
}

div.info {
  text-size: 40%;
  float: right;
  overflow: hidden;
}

<h1>Web Portfolio</h1>
<div id="skipnav">
  <a href="#main">Skip to Main Content</a>
</div>

Answer 1

这是你想要做的吗？或类似的？

在整页中打开此代码展开代码段

body {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
  font-family: Georgia, Arial, serif;
  color: #DD847F;
  text-align: left;
  background-color: #F7E0C4;
  padding: 0;
  height: 100vh;
  overflow: auto;
  width: 100wh;
  position: relative;
}

.main--title {
  border: 10px double #B00F32;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
}

.skip--content {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -10%);
}

<h1 class="main--title">Web Portfolio</h1>
<div id="skipnav" class="skip--content">
  <a href="#main">Skip to Main Content</a>
</div>