html - 将子div扩展到一侧

我正在尝试通过我的网站来完成某些工作，但我很难在Google搜索中使用措辞。我在section元素内有一个容器div，该元素在页面的整个宽度上扩展。我希望容器的宽度扩展到左侧，而右侧则永远不要扩展到特定点之外。

这是我现有的代码：

html

<section>
   <div class="container">
   </div>
</section>

的CSS

section{
    width: 100%;
    margin: auto;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

这导致container div相对于section元素居中。当浏览器的宽度改变大小时，container的左右边界保持不变。



现在，我想扩展container的左侧，而右侧保持不变。我怎样才能做到这一点？



其中的关键部分是使container的右侧相对于该部分的中心保持在原位置，因此，即使浏览器的宽度发生变化，该右侧也不会移动。

我这样做的原因是，我可以将背景图像放在container上，并使其展开到页面的左侧。

编辑：
我还必须能够将元素放入容器中并使它们到达正确的边缘，因此填充将不起作用。

最佳答案

如果我正确理解了您的问题，这可能会起作用：

.container{
    width: 1200px;
    padding-right: calc(50% - 600px);
}

关于html - 将子div扩展到一侧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53382551/