Look at this example:
http://jsfiddle.net/nvcode/BnGyu/2/
Now it is clearly obvious that the browser can work out the width correctly as the first div is fully filled but on the second div I place a width of 98% and 1% padding either side, making a total of 100%.
The browser knows that 100% is full width of the parent, so why is the child div not fill the space of the parent?
Even if you change the value of the widths it breaks even more?
By default any block-level element is going expand to fill the width of its containing element. In this case specifying the width of the inner element is redundant. In general it’s better (and less confusing) to use explicit metrics for your layout over percentages.
This sums it up nicely.