Layout background and foreground don't adjust at the same rate when browser increases/decreases

I have this test page that I am work开发者_如何学Pythoning from:

128.48.204.195:3000

The problem I am having is with the yellow bar across the top. If you make your browser narrow enough, the yellow bar stops being adjusted with the rest of the screen, and the blue buttons begin sticking out of the page and the yellow bar.

How can I make the yellow bar and the buttons adjust at the same rate and not have things stick out?

Change .nav width to 100%. Then it will always fill its content. You had a static size set, so once the containing element was smaller it would keep its size thus sticking out.

.nav_bar .nav {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

Or like Thirtydot pointed out below you can remove width altogether.