将子div扩展到一侧

Question

我正在尝试通过我的网站来完成某些工作，因为我很难在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的左右边界保持不变。

JetBrains Rider

现在，我想扩展container的左侧，而右侧保持不变。我该怎么办？

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

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

编辑： 我还必须能够将元素放入容器中并使它们到达右侧，所以填充将不起作用。

Answer 1

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

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