What's happening is the following: on zooming, the browser has to calculate the new widths of the various elements, and this causes rounding-off errors. For example at 83% zoom (using Chrome) the image on the left is 221px and the #nav-container is 613px, that adds up to 834px, but the #main-container is 835px, and that leaves a shortage of 1px which is the gap that you are seeing.
Okay, that may be the reason, what's the cure? Frankly I don't know. You could work around it by giving the #main-container a background image with white lower portion and green upper portion, x-repeating across the full width of the div; but I'm sure there should be a more elegant solution.