First of all you are going to have a problem with IE6 which does not display transparency with png files which you are using. For IE6 you will have to either use .gif files or use a pngfix which is maybe a little complicated if you are new to all this. Secondly you can remove the 2 red boxes for the about and contact tags, they can be done with css.
Next the above mentioned tags are the first on your page, put them in a new ul#topnav, and place it just below the #pagewrap. Then style these ul and li tags to display inline, float right and have a red background. You will also have to add the li a and a:hover styles as they will not be inherited from the ul#nav.
I hope this helps.
Re breaking your code, just copy both your index and css files so that you always have a back up file to return to if you get into too much trouble. Another piece of advice, is test often in Firefox first then the different IE browsers. Firefox is standards compliant and will show you what you coded, the IE’s have their own brand of standards and will show you their interpretation and all 3 are different.