Why does this horizontal scrollbar show up in browser for my website?

[twebman84]

The site is http://mrmusicdjs.com

 

Note that in Chrome, FireFox and IE, there's an unneeded horizontal scrollbar. There isn't any content to the right, so there shouldn't be. I'm relying on CSS to organize the content.  Here's the relevant CSS code:

 

/* PAGE CONTAINER DIVS - CENTERS CONTENT */
#centering_area {
text-align: center;
width: 100%;
}
#page_area {
width: 872px;
height: 494px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
text-align: left;
background:url('graphics/canvas.jpg') no-repeat;
}

/* HEADER CONTAINERS */

#logo {
position: relative;
left: 0px;
top: 8px;
height: 155px;
width: 872px;
z-index: 100;
}

#copy {
        line-height: 150%;
        color: #636466;
        position: relative;
left: 310px;
top: 7px;
z-index: 100;
font-family: Arial, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
        font-size: 11pt;
}

.blue
{
  color: #6EAFB4;
  font-weight: bold;
  font-family: Arial, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
  font-size: 11pt;
}

#bride {
position: relative;
left: 80px;
top: -103px;
height: 332px;
width: 287px;
z-index: 100;
}

#list-left {
        position: relative;
left: 365px;
top: -320px;
z-index: 100;
color: #6EAFB4;
font-family: Arial, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
        font-size: 12pt;
        font-weight: bold;
}

#list-right {
        position: relative;
left: 540px;
top: -430px;
z-index: 100;
color: #6EAFB4;
font-family: Arial, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
        font-size: 12pt;
        font-weight: bold;
}

#no-worries {
position: relative;
left: 487px;
top: -435px;
height: 80px;
width: 295px;
z-index: 100;
}

#phones {
position: relative;
left: 616px;
top: 298px;
height: 35px;
width: 154px;
z-index: 100;
}

#footer {
text-align: center;
        position: relative;
        left: 0px;
top: -412px;
        z-index: 100;
color: #FFFFFF;
font-family: Arial, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
        font-size: 12pt;
}

 

Why is the browser feeling the need to add a horizontal scrollbar? Thanks in advance to those who are willing to help.

[V]

try giving #list-left and #list-right a width. Maybe 200px each.

[V]

also give #copy a width and that should solve your issue. Ideally you should use floats rather than positioning them relative.