Margin: 0 auto div wrong position when scaling

Question

I have a navigation bar (actually two) - one in gray (in the image below) and white at the bottom. Both are wide 1000pxand have an attribute margin:0 auto;in their CSS. Look at live in full screen at http://jsfiddle.net/M2bE2/embedded/result/ and http://jsfiddle.net/M2bE2/ for output and code

Hope you have a basic understanding of my navigation. Well, then my problem will be like that. When you zoom out, white-nav (second) gets the wrong location. The image above shows the wrong location when reduced. I can not understand the problem that causes it. As a result, failure occurs rather quickly. But in my real project the problem is even greater (it gets frustrated after a small increase or decrease). Analyze the code and tell me where I will be wrong. I made the code in my violin clean so you understand. Any help would be appreciated . Thanks in advance.

Answer 1

. . - , . , float .., .

( ) http://jsfiddle.net/M2bE2/2

Answer 2

: auto CSS- .white-nav, , .

.white-nav {
    width:1000px;
    margin:0 auto;
    overflow:auto; /* Kick it */
}