CSS - Height change is shifting site

programming web dev
1

I have 2 different background images for the home and about pages. The about page bg’s height is greater than the home page (#content). When i specify the height for the about page (#content2), it shifts the entire site a few pixels to the left! I’ve never had this issue before and have Googled and searched on here unsuccessful. I tried changing the heights to 100%, that didn’t seem to work either. Can someone show me what the issue is? Thanks!

My CSS:


body {
    background-image: url(images/bg.jpg);
    background-repeat: repeat;
    margin-top: -2px;
    height: 100%;
}

#lft {
    background-image: url(images/lft.jpg);
    background-repeat: repeat-y;
    background-position: left;
    width: 8px;
}

#rt {
    background-image: url(images/rt.jpg);
    background-repeat: repeat-y;
    background-position: right;
    width: 8px;
}


#top {
    background-image: url(images/hdr_bg.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    height: 148px;
    width: 900px;
}


/*NAVIGATION*/


#nav {
    height: 39px;
    width: 100px;
    background-image: url(images/nav_bg.jpg);
    background-repeat: repeat;
    background-position: left top;
}

.home {
    width: 101px;
    height: 39px;
    margin: 0 0 0 20px;
    float: left;
}

.home a {
    display: block;
    width: 101px;
    height: 39px;
    background-image:url(images/home.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}
.home a:hover {
    width: 101px;
    height: 39px;
    background-image:url(images/home2.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

.home2 {
    width: 101px;
    height: 39px;
    margin: 0 0 0 20px;
    background-image:url(images/home2.jpg);
    float: left;
}

.about {
    width: 101px;
    height: 39px;
    float: left;
}

.about a {
    display: block;
    width: 101px;
    height: 39px;
    background-image:url(images/about.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

.about a:hover {
    width: 101px;
    height: 39px;
    background-image:url(images/about2.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

.about2 {
    width: 101px;
    height: 39px;
    background-image:url(images/about2.jpg);
    float: left;
}

.rm {
    width: 152px;
    height: 39px;
    float: left;
}

.rm a {
    display: block;
    width: 152px;
    height: 39px;
    background-image:url(images/rm.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

.rm a:hover {
    width: 152px;
    height: 39px;
    background-image:url(images/rm2.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

.rm2 {
    width: 152px;
    height: 39px;
    background-image:url(images/rm2.jpg);
    float: left;
}

.contact {
    width: 101px;
    height: 39px;
    float: left;
}

.contact a {
    display: block;
    width: 101px;
    height: 39px;
    background-image:url(images/contact.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

.contact a:hover {
    width: 101px;
    height: 39px;
    background-image:url(images/contact2.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

.contact2 {
    width: 101px;
    height: 39px;
    background-image:url(images/contact2.jpg);
    float: left;
}

/*NAVIGATION END*/



#content {
    background-image: url(images/body_bg2.jpg);
    background-repeat: no-repeat;
    height: 454px;
    width: 900px;
}

#content2 {
    background-image: url(images/about_bg.jpg);
    background-repeat: no-repeat;
    height: 782px;
}


#home_image {
    float: left;
    margin: -197px 0px 0px 461px;
}


#home_details {
    float: left;
}

h3 {
    font: Helvetica;
    font-size: 20px;
    color: #3c2d23;
    font-weight: 100;
}

#home_heading {
    float: left;
    margin: 35px 0px 0px 80px;
}

#divider {
    background-image: url(images/divider.png);
    width: 281px;
    height: 1px;
    margin: 78px 0px 0px 95px;
}
    
#home_text {
    float: left;
    width: 346px;
    height: 240px;
    margin: 20px 0px 0px 80px;
    font: Helvetica;
    font-size: 12.5px;
    color: #3c2d23;
    font-weight: 200; 
}

#about_details {
    float: left;
}

#about_heading {
    float: left;
    margin: 35px 0px 0px 140px;
}
    
#about_text {
    float: left;
    width: 730px;
    height: 542px;
    margin: 20px 0px 0px 80px;
    font: Helvetica;
    font-size: 12.5px;
    color: #3c2d23;
    font-weight: 200; 
}

#copy_insert {
    float: left;
    margin: -110px 0px 0px 240px;
}

#footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #736357;
    text-decoration: none;
    padding-top: 15px;
    background-image: url(images/footer.jpg);
    background-repeat: no-repeat;
    height: 50px;
    width: 920px;
    margin-top:-8px;
}

.footer_link {
   font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
}