With no other replies on this, I am guessing this is something which is a little tough to get around working with.
However, I just installed the Firebug add-on for Firefox - being a newbie to CSS, I saw this was something which really is a big help to understand layout,etc.
Using this I noticed that the "header" area was not so much an issue as the "headerimage" area.
When I uploaded the headerimage, I figured it would be the issue, and hence reduced the width to 300px (300 * 190). But with the firebug, I noticed the headerimage still shows to 760 px. Am not sure if it is showing the actual used width or the defined width - however, I am now trying to see if I can use any of the variables in the "sidebar" to make sure I can pull it up.
Any ideas on that, cause I am not able to see any? Margin, padding - all these do not define the position of the sidebar as a whole with respect to the container right?