Css 反应灵敏的英雄处理，顶部和底部边框延伸至左侧

我正试着把这种英雄式的待遇编码下来

标题和段落文本包含在一个最大宽度为1200px、自动左右边距的网格中

顶部和底部边框应从左边缘开始，但在居中1200px文本框的末端停止

我将它们编码为hr，认为这可能对风格更有用

<div class="hero">
    <img src="https://via.placeholder.com/1600x800" alt="">
    <div class="hero-text">
        <hr>
        <div class="contain-to-grid">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis.</p>
        </div>
        <hr>
    </div>
</div>

---

我被难住了。关于如何编写代码有什么想法吗？它确实需要响应。

刚刚添加了“.inner”div并添加了css。希望这对你有帮助

.hero{
位置：相对位置；
}
.英雄img{
宽度：100%；
高度：自动；
}
.英雄文本{
位置：绝对位置；
底部：30px；
宽度：100%；
}
.英雄文本hr{
边框颜色：#000；
利润率：30px0；
}
.包含到网格中{
宽度：100%；
最大宽度：1200px；
保证金：0自动；
}
.内部{
浮动：左；
宽度：100%；
边框顶部：2个实心#000；
边框底部：2倍实心#000；
}

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是埃吉特·拉奥里特·多洛。利奥·维尼纳提斯，苏西比特·尼西，卢克图斯·乌尔纳。埃尼安·艾库利斯·贾斯托·维勒·莫利斯。Lorem ipsum dolor sit amet，是一位杰出的献身者。尤特·埃吉特
拉奥里特·多洛。利奥·维尼纳提斯，苏西比特·尼西，卢克图斯·乌尔纳。埃尼安·艾库利斯·贾斯托·维勒·莫利斯

谢谢您的回答，但看起来边界没有延伸到左侧。您想延伸左侧边界吗？是的，如第一张照片所示

    .hero {position: relative;}
    .hero img {width: 100%; height: auto;}
    .hero-text {position: absolute; bottom: 30px; width: 100%;}
    .hero-text hr {border-color: #000; margin: 30px 0;}
    .contain-to-grid {width: 100%; max-width: 1200px; margin: 0 auto;}