Theme Scrolls way to the right

You’ve got several elements that are 2500px wide.

Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE to see what’s loading on your site and how to work with and change the CSS and HTML.

Thank you for your reply. I definitly went through with firebug and cannot figure this out as the only two items set to 2500 pixels are my nav and banner, which I did only because the page was so wide.

I played with firebug for awhile and cannot figure this out. Do you have any additional suggestions?

Thank you.

Megan

Take a look at your footer. There are a few elements which set an inline style (very bad design, a theme should never include inline styles because it makes it harder for a user to override) that includes margin-left properties which pushes everything out to the right. There’s also a CSS rule which fixes the width of the body element to 1400px, which is also kind of strange. You may want to play with those elements.

I have removed the elements that set an inline style in my footer and have adjusted the width of my body to several different sizes and still no dice.

Any other suggestions?

Thank you for your time?

Megan

Take the 2500px widths off the nav menu and the header image (#banner), and you have a good baseline layout. Then you can start adding in new CSS to format everything correctly.

Thank you. That worked.

However, I am very confused. The reason I set those widths to 2500px was because that was the only way I could get the menu bar and banner to stretch accross the whole screen? How else would I do that?

You can set the width for main-navigation to 100% and it will stretch across the width of the screen.

The banner image is a bit more problematic if you want it to stretch all the way across the screen width, because it’s contained within the page container. If you set the width of banner to auto, the banner will be limited to the width of page element. I don’t know how much control you have over the theme (it looks like it might be a custom theme), but you can try moving the header & banner elements outside of the page element.

Thank you again for your help. However, I apologize, I just don’t understand. WHen I change the width of the nav to 100%, there is still a huge white space to the left no matter how many changes I make to the width of the body of the site? Is there something else wrong?

I have full control. I made the theme.

I don’t see a width property in this CSS rule (this is the same rule which used to have the width: 2500px; property):

.main-navigation {
    clear: both;
    display: block;
    float: left;
	background: none repeat scroll 0 0 #303030;
	height: 45px;
	border-bottom: 5px solid #6e6e6e;
	padding-left: 38%;
	 margin-bottom: -20px;
}

Add a width: 100%; as the last property.

Ok, I have this and I am still getting a ton of white space to the right.

.main-navigation {
    background: none repeat scroll 0 0 #303030;
    border-bottom: 5px solid #6e6e6e;
    clear: both;
    display: block;
    height: 45px;
    margin-bottom: -20px;
    padding-left: 38%;
    width: 100%;
}

OK, I forgot. Your body is still set to a width of 1200px. Change it to auto.

That worked! Thank you for all of your help.