无法使header内phone类h4元素保持在header区域的问题求助

核心布局问题修复 #

1. 让.phone元素留在header内 #

你的.phone元素用了position: fixed，这会让它完全脱离文档流、相对于浏览器视口定位，自然不受header约束；同时float: right和fixed属性冲突，是导致元素乱跑的核心原因。直接删掉这两个属性，改用Flex布局控制header内部元素排列：

修改header和.phone的CSS：

header {
  padding: 0 10px;
  width: 100%;
  border: 1px solid red;
  /* 用Flex实现横向布局，两端对齐 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box; /* 防止padding撑宽元素 */
  padding: 1rem 10px; /* 增加上下内边距，让内容更舒展 */
}

.phone {
  padding: 10px;
  /* 删掉position: fixed、float: right、width: 50% */
}

同时调整header内的HTML结构，把左侧的h4和h1放在一个容器里，避免Flex布局打乱层级：

<header id="top-of-page">
  <div class="header-left">
    <h4>DRC</h4>
    <h1>NATIONAL SERVICES</h1>
  </div>
  <h4 class="phone">Call Us Today: <a href="tel:3305589032">330-558-9032</a></h4>
</header>

给新增的.header-left加基础样式：

.header-left {
  text-align: left;
}

2. 解决nav栏挤压覆盖问题 #

.nav_items用了position: absolute，会脱离文档流导致它覆盖在header上方。直接删掉这个属性，让导航栏正常占据文档流位置：

.nav_items {
  font-family: sans-serif;
  text-align: center;
  border: 5px solid black;
  background-color: darkred;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  /* 删掉position: absolute */
}

其他代码优化建议 #

• 统一盒模型：给所有元素加上box-sizing: border-box，避免padding、border撑宽元素，减少布局意外：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这样可以删掉body里的margin: 0，也不用单独给header加box-sizing。

• 简化导航链接样式：你现在给.nav_items a和li a重复设置了display属性，冲突且冗余，统一成：

.nav_items li {
  display: inline-block; /* 让li变成行内块，直接控制链接排列 */
}

.nav_items a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
  color: black;
  background-color: darkred;
}

删掉重复的.nav_button样式，直接把样式合并到.nav_items a里。

• 图片间距优化：img的margin: 100px auto过大，改成相对单位更适配不同屏幕：

img {
  width: 65%;
  display: block;
  margin: 2rem auto;
}

• 语义化优化：把.reel容器改成<main>标签，明确页面主体内容区域，符合HTML语义化规范。

修改后完整代码 #

CSS #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.nav_items {
  font-family: sans-serif;
  text-align: center;
  border: 5px solid black;
  background-color: darkred;
  list-style: none;
  width: 100%;
}

.nav_items li {
  display: inline-block;
}

.nav_items a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
  color: black;
  background-color: darkred;
}

li a:hover {
  color: white;
}

header {
  padding: 0 10px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 10px;
}

.header-left {
  text-align: left;
}

.phone {
  padding: 10px;
}

h4 {
  margin: 0.5rem 0;
}

h1 {
  margin: 0.5rem 0;
}

.center {
  margin: auto;
  width: 65%;
  padding: 10px;
  height: 100px;
}

img {
  width: 65%;
  display: block;
  margin: 2rem auto;
}

HTML #

<main>
  <header id="top-of-page">
    <div class="header-left">
      <h4>DRC</h4>
      <h1>NATIONAL SERVICES</h1>
    </div>
    <h4 class="phone">Call Us Today: <a href="tel:3305589032">330-558-9032</a></h4>
  </header>
  <nav class="nav_bar">
    <ul class="nav_items">
      <li><a href="main.html">Home</a></li>
      <li><a href="about.html">About DRC National</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="vendor.html">Become A Vendor</a></li>
      <li><a href="customers.html">Customers</a> </li>
      <li><a href="login.html">Log In</a></li>
    </ul>
  </nav>
  <img class="construct-image" src="https://media.istockphoto.com/id/1267010934/photo/experienced-engineer-explaining-the-problems-in-construction-works-development-after-recession.jpg?b=1&s=612x612&w=0&k=20&c=SA3ZB024TeuvRX_l_650nAIC3Ebfnf707vkbY1ifYEo="
    alt="image of construction workers on top of building">
</main>

内容的提问来源于stack exchange，提问作者gem's_dad