Question

I have this JSFiddle which explains my problem.

I want the menu items along the top to be 20% of the window, but I also want them to have a one-pixel right border.

As you can see it’s slightly out, this is very noticeable.

----------------------------------------------
| menu 1 | menu 2 | menu 3 | menu 4 | menu 5 |
----------------------------------------------
|          row one needs to be same          |
----------------------------------------------

I don’t think a percentage border would work, because then it wouldn’t be consistent with different window sizes.

How can I can accomplish this?

Answer 1

You can use CSS box-sizing for this:

Like this:

#nav_1232938 li, .row {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}