Extra room on webpage

Hello everyone! This is a really simple question but I can’t figure it out! I am working on a website and I realized that there is a scroll bar not only on the side but on the bottom! When I scroll all the way to the right on my site, there’s just empty room! I was wondering how to remove this space because I believe it is messing up my header.
Thanks in advance!

Use Firefox and the firebug plugin to check out your sites’ CSS and discover the reason for that extra space.

Hey i figured out what was wrong! mynavigation bar hadf 190% width and i fixed it! my header’s fixed, too! thanks, all!

This is my first website, and I’m using a lot of “ems” to measure out my margins, so I’m just going to give you my CSS beacause I can’t figure out what is wrong!

body {
font-family: Lucida Grande’, ‘Lucida Sans Unicode’, Lucida, Verdana, Helvetica, Arial, sans-serif;
line-height: 135%;
padding: 0;
margin: 0;
background-color: #9edfff;
}
#bodycontent {
margin: 2em;
}
h1, h2, h3, h4 {
font-family: Baskerville, Georgia, Garamond, ‘Times New Roman’, Times, serif;
}
h1 {
font-size: xx-large;
background-color: #B00000;
color: #ffc75d;
padding-top: 1.1em;
padding-bottom: 1.1em;
padding-left: 1em;
padding-right: 1.2em;
margin: 0;
background: #B00000 url(p2p-paris-bg.jpg) repeat-y right;
}
#tagline {
background-color: #b00000;
background: #b00000 url(fading-bg.png) repeat-y right;
border-top: 3px solid #b00000;
border-bottom: 3px solid #b00000;
font-style: italic;
font-family: Baskerville, Georgia, Garamond, ‘Times New Roman’, Times, serif;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .9em;
margin: 0;
background: navy url(navy-bg.jpg) repeat-y right; 
}
.feature {
position: absolute;
top: 329px;
right: 2px;
}
ul#main-nav {
font-family:helvetica,arial,sans-serif;
margin-left:2em;
padding:.2em;
alignment: center;
float:left;
width:190%;
}
ul#main-nav li {
margin:.2em;
padding:.2em;
list-style:none;
float:left;
margin:0 0.3em 0 0;
}
ul#main-nav li a {
text-decoration:none;
display:block;
padding:0.3em 0.5em;
border-top:0.4em solid navy;
border-bottom:0.4em solid navy;
color: green;
background:#66fff;
font-size:0.8em;
width:11em;
text-align:center;
}
ul#main-nav li a:hover {
border-top:0.4em solid #900;
border-bottom:0.4em solid #900;
color:#000;
text-transform: uppercase;
font-weight: bold;
background-color: #ffffff;
}
#homep2p {
padding-right: 208px;
}
.journalfoto{
width: 400;
float: right;
}
.journalfoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 300px;
line-height: 1.4em;
text-align: center;
}
.journalalign {
padding-right: 340px;
font-size:
}
.journaltext {
position: absolute;
padding: 300px;
}

You have content that overflows the page. Check your margins/widths/paddings in css