Page wider than it should be

Hello everyone, I have a slightly annoying problem with my page becoming really wide for no apparent reason. When viewed in a browser, a horizontal scroll bar appears at the button even though all of the content is under 1200px wide, and my screen is suitably wide.

My website has the following HTML



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Page</title>
<style type="text/css">


body 
{
    background-color: #e7e7e7;
    width: 100%;
}
.outer
{
    width: 100%;
    text-align: center;
    position:relative;
}
.main
{
    width: 1200px;
    height: 782px;
    margin-left: auto; 
    margin-right: auto;
    text-align: left;
    position:relative;
}

h1
{
    font-family: Klavika;
    font-size: 22px;
    color: #000;
    position:relative;
    left: 38px;
    top: 15px;
}
h2
{
    font-family: Klavika;
    font-size: 16px;
    color: #C8001A;
    position:relative;
    left: 770px;
    top: -45px;
    letter-spacing:1px;
}
h3
{
    font-family: Klavika;
    font-size: 28px;
    color: #C8001A;
    position:relative;
    left: 38px;
    top: -50px;
}
p
{
    font-family: Helvetica;
    font-weight:bold;
    font-size: 12px;
    color: #666;
    position:relative;
    left: 38px;
    top: -75px;
    letter-spacing:1px;
    line-height:125%
    
}
p.red
{
    font-family: Klavika;
    font-size: 14px;
    color: #C8001A;
}


</style></head>
<script src="http://xfinity.comcast.net/js-api/compressed/xpbar.js"></script>


<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="outer"><div class="main">
<h1>For some reason<br/>the page becomes really wide</h1>
<h2>Does it have to do with positioning?</h2>
<h3>SAMPLE TITLE</h3>



<p>I am not affiliated with comcast by the way;</p>

<p class="red">I was just trying their vendor's API. So why is the page so wide?</p>


</div></div>
<iframe scrolling="no" frameborder="0" src="http://sprint.qa.xfinity.comcast.net/footer/vendor/standard/2/" style="width: 100%; height: 309px;"></iframe>
<p>&nbsp;</p>
</body>
</html>



For some reason, it becomes REALLY wide.
Anyone know what might be the cause?

Thanks :]

The problems are caused by the code in red, and you need the extra code in blue:

[COLOR="#0000FF"]body {margin:0;}[/COLOR]

h1
{
    font-family: Klavika;
    font-size: 22px;
    color: #000;
    position:relative;
    [COLOR="#FF0000"]/* left: 38px; */[/COLOR]
    top: 15px;
}

h2
{
    font-family: Klavika;
    font-size: 16px;
    color: #C8001A;
    position:relative;
   [COLOR="#FF0000"]/*  left: 770px; */[/COLOR]
    top: -45px;
    letter-spacing:1px;
}
h3
{
    font-family: Klavika;
    font-size: 28px;
    color: #C8001A;
    position:relative;
    [COLOR="#FF0000"]/* left: 38px; */[/COLOR]
    top: -50px;
}
p
{
    font-family: Helvetica;
    font-weight:bold;
    font-size: 12px;
    color: #666;
    position:relative;
    [COLOR="#FF0000"]/* left: 38px; */[/COLOR]
    top: -75px;
    letter-spacing:1px;
    line-height:125%
}

Elements like h1 and p are ‘block’ elements, so they are 100% wide by default. If you move their position, they will still be 100% wide plus the extra left position. That causes the page to push out much wider.