at this address: http://effective-practice-marketing....hman/about.php

I have a problem as you will see (not formatted for IE so pls look in Firefox)

You will notice there is a horizontal scroll regardless of the window size and I can't, for the life of me, figure out where it's coming from.

CSS:

@charset "utf-8";
* {
    outline:none;
    }
html {
    text-align:center;
    font-family:helvetica, verdana, arial, sans-serif;
    height:100%;
    min-height:100%;
    }
body {
    margin:0;
    text-align:center;
    height:100%;
    min-height:100%;
    background:url(images/bg.jpg) no-repeat;
    background-position:top center;
    }
img {
    border:none;
    }
h1 {
    font-size:1.5em;
    color:#261b0e;
    font-weight:lighter;
    }
h2 {
    margin:20px 0px 10px 0px;
    }
    legend {
    color:#261b0e;
    font-weight:lighter;
    margin-left:40px;
    font-size:1.2em;
    }
ol {
    font-size:12px;
    padding-left:25px;
    line-height:140%;
    }
ul {
    list-style-type:disc;
    font-size:13px;
    padding-left:25px;
    line-height:120%;
    }
li {
    margin-top:5px;
    }
p {
    line-height:150%;
    }
#wrap {
    margin:0 auto -80px auto;
    width:870px;
    height:auto;
    text-align:left;
    }
#header {
    height:100px;
    width:870px;
    background-image:url('images/header.jpg');
    background-repeat:no-repeat;
    background-position:top center;
    margin:0 auto;
    }
#top1 {
    background:url(images/top1.jpg) no-repeat;
    width:870px;
    height:41px;
    }
#topnav {
    }
#left {
    background:url(images/left-bg.gif) repeat-y;
    width:145px;
    height:500px;
    padding-right:5px;
    margin:0;
    float:left;
    }
#mid {
    float:left;
    overflow:auto;
    width:500px;
    height:480px;
    background-color:#fff;
    padding:10px;
    }
    #mid h1 {
        margin-top:0;
        }
    #mid h2 {
        font-size:16px;
        color:#274B57;
        }
    #mid h3 {
        font-size:14px;
        text-transform:uppercase;
        color:#573327;
        }
    #mid h4 {
        font-size:13px;
        color:#524227;
        margin:20px 0px 0px 0px;
        }
    #mid a {
        color:#524227;
        }
    #mid p {
        font-size:12px;
        }
    #mid .caption {
        font-size:10px;
        }
#right {
    width:180px;
    height:480px;
    background-color:#fff;
    float:left;
    padding:10px;
    overflow:auto;
    }
    #right h2 {
        font-size:13px;
        color:#274B57;
        }
    #right p {
        font-size:11px;
        }
    #right img {
        margin-top:15px;
        padding:0;
        }
    #right img:first-child {
        margin-top:0;
        }
#footer {
    width:100%;
    height:140px;
    background:url(images/footer-bg.jpg) no-repeat;
    background-position:top center;
    margin:1px auto 0px auto;
    padding:20px 10px 10px 10px;
    }
    #footer h1 {
        margin-top:0;
        text-align:left;
        font-size:.8em;
        color:#ccc3be;
        }
    #footer a {
        font-size:10px;
        color:#000;
        text-decoration:none;
        }
    #footer p {
        font-size:10px;
        letter-spacing: -.1px;
        }
    #footerInside {
        width:870px;
        margin:0 auto;
        }
/*****************CLASSES********************/
.arrow {
    list-style-image:url(images/list-image.gif);
    font-size:16px;
    font-weight:bold;
    margin-top:10px;
    padding-left:30px;
    }
    .arrow li {
        margin-top:8px;
        }
    .arrow a {
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:lighter;
    }
    .arrow a:hover {
        color:#baf4bd;
        }
.clear {
    clear:both;
    }
.floatLeftImg {
    float:left;
    padding-right:10px;
    }
p.caption {
    margin-top:5px;
    font-size:100px;
    }
.testimonial {
    background-color:#e5d1af;
    background-image:url(images/quote.jpg);
    background-repeat:no-repeat;
    border:1px solid white;
    font-size:13px;
    padding:15px;
    }
    .testimonial a {
        font-weight:bold;
        font-style:italic;
        color:#7f6c4c;
        }
    div.testimonial > p:first-child {
        text-indent:50px;
        }

Anybody who can help me figure this out will be my hero!! I've spent so long trying to pinpoint this..
Thank youuu!


EDIT: I have discovered that it is the footer causing the problem and have yet to figure the problem out. I will test some things and post my results.

EDIT #2: Ugh it's always some obvious stuff that I'm too tired to figure out at 1am in the morning. It was that #footer was width 100%. Not exactly sure why that caused it but changing it to auto did the trick.

Let this be a lesson! Get some sleep and start fresh!!

Get rid of the 10px right padding on #footer and the horizontal scroll will go away.

You need to validate your code, things like this are improper:
<a name="professionalGroups"><h2>Professional Groups</h2></a>

You cannot wrap a heading tag inside a link - put the link INSIDE the Hx tags and it'll be fine.

Yeah I realized that I'd put block levels inside inlines and I was in the middle of fixing those.. Thanks for the heads up though!!

Always a big help ladynred