When using percents to define the width of an element, together with padding or borders, the actual size of that element is bigger than expected. That is because its width is now: percentage + (border/+padding). To avoid that, the following code can be used:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */