在浏览器调整元素边框符合浏览器窗口时调整

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上显示的解决方案。