CSS element extruding outside of fixed width main container causing background color to cut off

CSS element extruding outside of fixed width main container causing
background color to cut off

I have a 2-tone design the top container is at 100% width and has a bg
color of blue.
The lower part of the page has a bg color of white.
The content width of the site is at 960 with 20px of padding on each side
so total 1000px.
My problem is this map on the homepage only that extrudes outside of the
constraints of the 1000px (by design btw).
When i reduce the browser width and scroll horizontally the top container
with 100% width cuts off the bg color and it's due to the map container.
So i believe that has isolated the problem.
The solution now lies in how to make the map container extrude the main
body width constraints without causing the bg color on the top container
to cut off when the browser window is reduced and the user scrolls
horizontally?
Here is a screencast showing the issue.
Here is a codepen with the code.
Any ideas or helpful would be much appreciated.
Thanks.