First, the nav page has a horizontal scroll bar unless I use overflow-x: hidden;. I’m not sure why it does this. Second, I wasn’t sure how to center the main div: div#container. I floated it to the left with a left margin. Is there any better way to do this? I feel like the content is centered on the index page, but not on the nav page.
Also, do you see any other potential problems with the way I coded this?
When turning overflow-x: hidden; off I do not get a horizontal scroll bar unless the width of the page exceeds my browser window (Chrome 12). I assume you are getting a scrollbar no matter how wide your window is?
Center the main div by using margin: 0 auto; (shorthand for margin: top/bottom left/right). You can change the top and bottom margin’s if you need but by setting the left and right margin’s to auto, it center’s the div on the page.
Your HTML doesn’t validate and I would highly recommend running your CSS through csslint.net. This should help point out some improvements to your coding such as writing more efficient CSS selectors.
the body on the nav page is wide because the social stuff is overflowing its container. I’d put an overflow: hidden; on .socialbox or get a handle on its children. you can then remove the overflow-x: hidden from body
Thank you guys so much for the help! The margin: 0 auto; and overflow:hidden on the social bar worked great!!
I ran the index.html through an html validator and it said it had 21 errors :/. 20 of them were about having duplicate ids, which I changed to class. That leaves one html error at line 275. It says I shouldn’t have a unordered list within an unordered list. Is there any other way to have a sub list?
As for my CSS I had a lot of warnings come back with no errors on the site you suggested, sl1dr. I don’t understand some of them, such as don’t “use ids in selectors.” I’m not sure what that means. For example, I changed div#container to #container. And it still came back with this message o.O.