CSS padding (a different question)

http://65.254.36.178/~deltaxit/padding.php

Ignore that it looks like crap. I have just one specific question for this example. Using the following padding code makes the div go wider than I wanted and forces the page wider too by the same amount as the intended padding.

Notice how the left padding works fine and pushes the text within that div over 20px. But it also pushes the red div over to the right by 20px too (plus some extra white space too that I can't explain at all). Why? How do I avoid this? I can't use margin because that adds space on the outside which would move the whole div over to the right by 20px revealing white space on the left side too.

This padding crap happens to me all the time. On fixed width layouts I just subtract the padding amount from the width and it looks fine. But this is a full width example where I can't do that, and it's just time for me to finally figure it out what's going wrong anyway.

help. Thanks.