如何让水平边框线与Header Div对齐？求纯CSS实现方案

问题背景 #

现有Header和底部边框的CSS代码如下：

.page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding: 5px 5px 5px 20px
  margin-left: auto;
  margin-right: auto;
  width: 100%
  height: 40px;
}

.horizontal-line {
  border-bottom: 1px solid red;
  margin: auto;
}

遇到的问题：边框无法与Header自适应对齐——设置固定padding/margin会丢失居中效果，用max-width在大屏表现正常，但页面缩小时无法动态调整宽度，需要纯CSS解决方案，且不便修改JS模板代码。

第一步：修复原CSS语法错误 #

原.page-header代码存在语法问题：padding、width属性末尾缺失分号，会导致后续CSS属性解析异常，先补充分号：

.page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding: 5px 5px 5px 20px; /* 补充分号 */
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* 补充分号 */
  height: 40px;
}

方案一：复用Header的布局规则（无需修改HTML） #

让边框元素复用Header的内边距、宽度规则，并通过box-sizing: border-box确保padding不会溢出宽度，实现自适应对齐：

.horizontal-line {
  border-bottom: 1px solid red;
  margin: auto;
  padding: 0 5px 0 20px; /* 与Header一致的左右内边距 */
  width: 100%; /* 与Header同宽度 */
  box-sizing: border-box; /* 关键：将padding纳入宽度计算，避免溢出 */
}

原理：box-sizing: border-box让元素的width包含padding值，这样100%宽度加上padding后，元素实际宽度仍与容器一致，边框的底部线会和Header的内容边缘完全对齐，且页面缩放时自动适配。

方案二：父容器统一控制范围（需调整HTML结构） #

如果允许给Header和边框添加一个共同的父容器，可以通过父容器统一控制居中、内边距和宽度，让两个元素自然对齐：

HTML结构调整：

<div class="header-wrapper">
  <header class="page-header">...</header>
  <div class="horizontal-line"></div>
</div>

对应CSS：

.header-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0 5px 0 20px; /* 统一左右内边距 */
  box-sizing: border-box;
  /* 可选：添加max-width限制大屏宽度 */
  /* max-width: 1200px; */
}

.page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding: 5px 0; /* 仅保留上下padding，左右复用父容器 */
  height: 40px;
}

.horizontal-line {
  border-bottom: 1px solid red;
}

原理：父容器负责处理居中、宽度和内边距，Header和边框无需单独设置margin和左右padding，自动继承父容器的范围，实现完美对齐且自适应页面缩放。

内容的提问来源于stack exchange，提问作者dReas