如何在不影响上层内容的情况下增大row背景宽度？HTML/CSS问题

我正在学习Web开发，遇到一个布局难题：我想让饼干图片旁段落所在的row元素的背景宽度增大，但尝试修改width属性时，整个row元素都会被缩放，无法单独调整背景宽度。

问题截图：

解决思路 #

核心是把背景区域和内容区域分离，不要让背景直接作用在承载内容的row元素上。以下两种方法均可实现需求：

方法1：用伪元素扩展背景 #

保留row的内容宽度，通过:before伪元素创建全屏背景层，置于内容下方：

修改.row的CSS：

.row {
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px 30px;
    /* 移除原有的background-color */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 150px;
    z-index: 0;
    position: relative; /* 新增，让伪元素相对它定位 */
}

/* 新增伪元素作为背景 */
.row:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 保持背景居中 */
    width: 100vw; /* 占满整个视口宽度 */
    height: 100%;
    background-color: #636363;
    z-index: -1; /* 放在内容下方，不遮挡文字和图片 */
}

方法2：嵌套容器分离背景与内容 #

给row外层套一个容器，让外层负责背景全屏展示，内层row维持原有内容宽度：

修改HTML：

<!-- 新增外层背景容器 -->
<div class="row-background">
    <div class="row">
        <div class="left">
            <img src="https://img.freepik.com/premium-photo/chocolate-chip-cookie-with-bite-taken-out-it_899894-8209.jpg" alt="咬了一口的巧克力曲奇">
        </div>
        <div class="right">
            <!-- 修正原HTML结构：将段落移入.content容器内，保证样式生效 -->
            <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus veritatis praesentium deleniti totam atque, corporis repellat? Doloremque inventore nostrum rerum nemo ullam assumenda architecto nesciunt? Nihil vero hic qui? Sequi?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, culpa quasi omnis optio qui totam incidunt soluta quibusdam harum deleniti ut vel error tempora facere saepe a voluptas rem. Ut?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam velit itaque tempore a, modi officia, autem, sint laudantium non animi nam consequatur laborum aperiam. Culpa voluptatibus laborum natus illo eum.</p>
            </div>
        </div>
    </div>
</div>

修改CSS：

/* 新增外层背景容器 */
.row-background {
    background-color: #636363;
    margin-top: 150px;
    display: flex;
    justify-content: center; /* 让内部row保持居中 */
}

.row {
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    z-index: 0;
}

注意：原HTML中.right下的.content为空，段落直接放在.right内会导致原CSS中.row .right .content p的样式失效，建议将段落移入.content容器内，保证样式正常生效。

内容的提问来源于stack exchange，提问作者user23742144