CSS border effecting width when resizing browser

Question

I made two simple navigation menu using ul and li. One without border and another with border. The width of the both menu is fixed with 400px.

Answer 1

The border width doesn't scale together with the li width, that's why the menu breaks. So one solution can simply be:

.nav2 ul li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/jhz56/1/