在浏览器调整大小时使元素边框与浏览器窗口相遇

Question

当我缩小浏览器屏幕时，如何使元素的边框平滑地与窗口边缘相接，同时文本与两侧保持 15px 的距离？

我有以下 HTML：

<section>
 <header>
  <h1>Header Text</h1>
 </header>
</section>

在桌面视图中，它看起来像这样：

该部分有一个max-width 或1000px，并以margin-left 和margin-right 为中心设置为auto。此外，标头是width:100%（默认情况下），它有一个border-top:1px solid black;。

在移动视图中，标题如下所示：

所以顶部有边框的header接触到了屏幕的边缘，但是里面的h1在左右两边都有15px的填充。

我的问题是：当屏幕从 1030px 缩小到 1000px 时，如何让 h1 内容始终与屏幕边缘保持 15px 的距离，但边框与屏幕边缘相接？

body{padding:0;margin:0;}
section{max-width:1000px;margin:0 auto;}
header{border-top:1px solid black}
@media(max-width:1000px){
  h1{padding:0 15px;}
}

<section>
 <header>
  <h1>Header Text</h1>
 </header>
</section>

Answer 1

您需要使用媒体查询绝对定位您的 h1 元素：

body{padding:0;margin:0;}
section{max-width:1000px;margin:10px auto;}
header{border-top:1px solid black}

@media (max-width: 1030px) {
  h1{position: absolute; left: 15px}
}

这是CodePen 上显示的解决方案。