Left align div to centered container - css

Question

I have a container centered with a max width as follow:
#container {
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
Now I want to create a new div just below the contained one, but I want this new div to align to the left and expand beyond the right side of the container. Something like that:
|||||||||||||||||||||||||||||||||||| #container
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| #div 2
The difficulty is that #container margins are auto, so how can I force #div to follow #container left margin as the browser resizes?!
NOTE: I am looking for a pure CSS solution WITHOUT JAVASCRIPT
EDIT: It was not clear in my explanation but, my goal was to make the #div ADJACENT to the #container. Like this:
<div id="container"></div>
<div id="div"></div>
I ended up refactoring my html to use #bananabran solution with absolute positioning which simply uses parent-child structure:
<div id="container">
<div id="div"></div>
</div>

Answer 1

You don't have to force the div to follow its container's left margin. Divs naturally start at the top-left of their container (unless otherwise specified or affected by). You also do not need to use Grid or FlexBox. CSS3, and even CSS2 can do this natively.
See working CodePen example: https://codepen.io/bananabrann/pen/QWWdXQZ
Assuming you have no other code affecting your code...
<div id="container" />
<div id="my-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;
}

Answer 2

CSS-Grid can do that:
.wrap {
display: grid;
grid-template-columns: 1fr minmax(auto, 400px) 1fr;
/* 400px for demo purposes */
}
.container {
padding: 1em;
background: pink;
grid-column-start: 2;
}
.wide-r {
padding: 1em;
background: lightgreen;
grid-column: 2 / span 2;
}
<div class="wrap">
<div class="container">Container
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, similique, maxime aspernatur dolorum quod recusandae possimus fuga blanditiis laudantium delectus quis magni. Veniam, consequuntur dolores facilis cupiditate fugiat ullam aspernatur!
Corporis excepturi quos esse voluptatem voluptatibus corrupti ea, tempora culpa magni, hic aspernatur pariatur molestias itaque doloremque assumenda ad fugiat!</p>
</div>
<div class="wide-r">Wide Right</div>
</div>