My Homepage Image and Menu Bar will Not Center

Are you ready to be very happy?

Go into your styles.css file and find this around line 427:

/* =Menu
------------------------------- */

.home #access {
	margin: 0 auto 30px 0;
	width: 940px;
	text-align: center;

Change the margin to read “0 auto 30px auto” instead.

Line 414 is all kinds of messed up:

/* This is the custom header image */
#branding img {
	/* box-shadow: 0px 4px 8px #AAA; */
	display: block;
	float: center;
	margin-left: center
	margin-right: center
}

There is no such thing as float center. Or margin center. Get rid of the line that starts with float and the two lines that start with margin. Replace it with margin: auto; and don’t forget the semicolon.

Floats pull things right or left and allow text to flow around them. In a nutshell. Floats are very finicky and often cause unwanted layout issues. Not the case, here, but just as a warning for the future. Margin describes the amount of space around a given element. If you set the left and right margins to auto and the things you are trying to center is a block element AND it is inside a container of known width… the effect is that it will be centered. It’s all nuts when you start digging in, but eventually it actually starts to make sense.

I hear the Angel’s singing this morning after doing what you said to fix the homepage! Thank you, thank you, thank you!! I barely slept last night thinking about this!

I have NO background in computers at all (obviously you can tell that by my super genius code “float: center and Margin: center” haha..I was just desperate to try ANYTHING last night after days of this and about 4 hours last night!

THANK YOU!!!!!!

You bet. Good luck.

If you ever decide your time is better spent on photography and not on your website, think about hiring a designer. But if you want to learn, you are where I was about 6 years ago.