the true width of an element is width + left-padding + right padding.
for the header, you have:
#outerWrapper #header {
background-color: #ffffff;
background-image: url(../siteassistpro_images/Logo1.jpg);
background-repeat: repeat-y;
color: #006;
font-size: 36px;
font-weight: bold;
width: 744px;
height: 80px;
line-height: normal;
padding: 15px 0px 0px 15px;
}
the padding is written as top right bottom left. so:
padding: 15px 0px 0px 15px;
means
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px
padding-left: 15px;
so the true width of the header is:
width: 744px; + padding-right: 0px; + padding-left: 15px;
744 + 0 + 15 = 759px
change the padding from:
padding: 15px 0px 0px 15px;
to:
padding: 15px 0px 0px 0px;
to maintain the 744px width of the header.
same for the navigation. you have:
#outerWrapper #topNavigation {
background-image: ("../siteassistpro_images/Logo1.jpg");
background-position: bottom;
background-repeat: no-repeat;
color: #fff;
font-weight: bold;
width: 744px;
height: 31px;
padding: 0px 10px 0px 0px;
background-color: #AB4C34;
}
which means the true width is
width: 744px; + padding-right: 10px; + padding-left: 0px;
744 + 10 + 0 = 755px
change the padding:
padding: 0px 10px 0px 0px;
to:
padding: 0px 0px 0px 0px;
in order to maintain the 744px width.
For the main content, the problem is the background image:
background-image: url(../siteassistpro_images/contentWrapper_bg.jpg);
the image is 160px wide, with a 4 pixel left border and a 12 pixel right border. the 12 pixel right border is causing the body to appear to shift to the left.