Positioning Elements on Edge of Container

Hopefully this is better explained with the picture I mocked up here:

I have a full-width, 100vh area that has a .container that's 100% width / 1200px max-width and 100vh as well (centered of course.). Inside of this container I'll have 3 elements (the red X's).

How can I get the center point of these elements to literally stick to the edges of the container? My end goal is to have them seemingly floating, but then as the screen width shrinks and the .container width starts to collapse that the items follow that edge and look to be just peaking into the screen.

CodePen