与页眉div对齐

Question

我有一个标题div，看起来像这样在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;
}

和它下面的边界div:

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

我的问题是，我不能在边界上使用填充来使它与标题对齐或将外边距更改为固定数字，因为这样它就不会居中。

我该如何去修复这个，使边界调整到与标题相同的宽度?

可以在CSS中完成吗?我问的原因是JS是一个模板(我知道不理想)，网站上有其他版本使用相同的模板(他们都没有使用边界div)。

我试过使用max-width，这在网站的大版本上效果很好。这样做的问题是，当页面缩小时，它不会动态调整max-width:

感谢你的帮助:)

Answer 1

如果你可以添加一个容器，你可以这样做:你也可以在容器内添加水平线div，并使其宽度为100%，并得到相同的结果。

.container {
width: 60%;
height: 300px;
background-color: white;
border-bottom: 2px solid black;
}
.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: 200px;
background-color: yellow;
}

<div class="container">
<div class="page-header"></div>
</div>

或者把%设置为max-width，然后当你调整屏幕大小时，它就会调整大小这不是很漂亮，我宁愿选择在它周围使用容器。

.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%; */
max-width: 50%;
height: 200px;
background-color: yellow;
}
.horizontal-line {
max-width: 50%;
margin-top: 50px;
border-bottom: 2px black solid;
}

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