Chrome and it's handling of %s

When using percentages (%) for the sizing of my elements, Chrome apparently prefers to make up its own rules mathematically. It is my understanding that when you add 80 + 20, you get 100; right? Okay good. Chrome understands this too. But what if we write the same equation differently. For instance: (78 + 1 + 1) + (18 + 1 + 1) What'd you get? Was it 100? Yeah, me too. So then can somebody please tell me why Chrome thinks otherwise? Take two elements and float them alongside one another. Then, apply `width:20%` to one element and `width:80%` to the remaining element. You'll notice that 100% of the page (or container) has been occupied by both elements side-by-side. However, let's keep it simple and add a padding of only 1% to both sides of each element. This means one element will have `width:18%; padding:1%` and the other element will have `width:78%; padding:1%`. In theory, this should still have the same result: 100% of the page (or container) is occupied by both elements side-by-side. But in Chrome, this simply isn't so. It falls short. The proof is in the pudding: jsfiddle (you'll notice the slight differences if you're using Chrome). It's frustrating because when it all adds up, especially with a higher volume of elements being used side-by-side, it can really throw a layout out of whack. I know that by creating child elements to take care of padding and/or the margins, we can avoid the situation, but this can lead to the use of markup that would otherwise be redundant. I just need an explanation as to why Chrome behaves this way (maybe it's a Webkit thing altogether, I haven't tested it yet).