Html 如何将水平线延伸到页面容器的边缘？

我想要一个标题，看起来像这样：

HEADING -----------------------------------    

管线以响应方式延伸至容器边缘

我用下面的css创建了一个基本版本，它指定了行的百分比长度，但我不知道如何将行专门扩展到容器边缘

.border-heading {
     clear: both;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 50px;
    text-align: left;
    margin-top: 3%;
    margin-bottom: 3%;
    color: #bf593a;
     font-family: "Sorts Mill Goudy", serif;

}

@media (max-width: 767px)
    {.border-heading 
{font-size: 40px;
    }
}


.border-heading:after {
    content: '';
    height: 3px; /* Change border thickness */
    background-color: #bf593a; /* Change border color */
    flex: 0 0 50%; /* 20% is the border width */
    margin: 0 30px;
}

这是有问题的那一页。请向下滚动至“照片库”和“博客帖子”

---

使用

flex:1

。边框标题{
明确：两者皆有；
显示器：flex；
对正内容：左；
对齐项目：居中；
字体大小：50px；
文本对齐：左对齐；
利润率最高：3%；
利润底部：3%；
颜色：#bf593a；
字体系列：“排序磨古迪”，衬线；
}
@介质（最大宽度：767px）{
.边界标题{
字体大小：40px；
}
}
.边界标题：之后{
内容：''；
高度：3倍；
背景色：#bf593a；
flex:1；/*更改此*/
利润率：0.30px；
}

照片库

无法解决此问题，但在您的正文中，CSS标记将关闭水平溢出。

flex grow:1

而不是

flex:0 50%