Css 左对齐div到中心容器

我有一个以最大宽度为中心的容器，如下所示：

#容器{
左边距：自动；
右边距：自动；
最大宽度：900px；
}

现在我想在包含的div下面创建一个新div，但是我希望这个新div向左对齐并扩展到容器的右侧之外。诸如此类：

            ||||||||||||||||||||||||||||||||||||                                #container
            |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||     #div 2

困难在于

#container

页边距是

自动的

，所以当浏览器调整大小时，如何强制

#div

跟随

#container

左边距

注意：我正在寻找一个没有JAVASCRIPT的纯CSS解决方案

EDIT:我的解释不清楚，但我的目标是使

#div

与

#容器

相邻。像这样：

<div id="container"></div>

<div id="div"></div>

CSS网格可以做到这一点：

.wrap{
显示：网格；
网格模板列：1fr最小值（自动，400px）1fr；
/*用于演示目的的400px*/
}
.集装箱{
填充：1em；
背景：粉红色；
网格列开始：2；
}
.wide-r{
填充：1em；
背景：浅绿色；
格构柱：2/2跨；
}

容器
Lorem ipsum dolor sit amet，奉献精英。类似地，最大限度地减少对大鼠的伤害。维尼亚姆，我是尤拉姆·阿斯佩纳图尔（ullam aspernatur）医院的院长！
腐败的身体除外，这是一种巨大的过失，是一种被认为是灾难性的行为

右翼

您不必强制div跟随其容器的左边距。div自然从其容器的左上角开始（除非另有规定或受其影响）。您也不需要使用网格或FlexBox。CSS3，甚至CSS2都可以通过本机实现这一点

请参阅工作代码笔示例：

假设您没有其他影响代码的代码

---

可能重复：我的建议是使用CSS Flex:。看看吧……这样你就不必再做任何边距了，只要做

display:flex

然后您可以将容器

居中

和div 2对齐到

柔性端

您的问题并不是很清楚，也许您可以把它放进去！对第二组的风格很重要container@Riskbreaker是的，但是flex不会给你想要的结果，同时grid是最简单、优雅和现代的解决方案。谢谢@Paulie_D我相信这是一个很好的解决方案，然而，我对css网格不太满意，bananabrann的解决方案现在更容易与我的代码集成。再次感谢：）谢谢@bananabrann，我不得不重构一下我的代码，因为两个div是相邻的，而不是父子样式。。。但你的解决方案对我来说更干净。

<div id="container">
    <div id="div"></div>
</div>

#container {
  background-color: blue;
  position: relative;
  margin: 0 auto;
  width: 900px;
  height: 300px;
}
#my-div {
  background-color: red;
  position: absolute;
  bottom: 0;
  width: 500px;
  height: 20px;
}