H3 is aligning right of center, need a fresh set of eyes

Question

I have a potentially stupid question here.

I've got a fiddle with a block of welcome text coming up off-center. I'm usually excellent at trouble-shooting my own CSS but this is making me absolutely batty. I've stripped all of the extra margin autos and text-align centers away to make this clearer. You can actually delete the entire JS segment and set the #welcome DIV opacity back to 1 for further clarity.

http://jsfiddle.net/Imperative/29Aat/88/

Here's the relevant CSS:

html, body {
    height: 100%;
    margin: 0 auto;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#wrap {
    zoom: 1;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}
#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
}

I'm clearly missing something really novice and really obvious but I'm too close to this thing 88 iterations in and I'm completely missing the boat.

What is cascading downwards from html, body, wrap and causing the whole #welcome block to shift right? I would have expected a lot of positions without any efforts at centering anything but a 50% shift to the right? What the frack?

Answer 1

Your <nav> element can't contain <li> elements. You have to put them into a <ul>:

nav
  ul
    li
    li

As for your actual problem: your header is collapsing because it contains floating elements. Give it overflow: auto and it will resize to fit them:

header.topbar {
    overflow: auto;
    /* Get rid of this: height: 80px; */
}

Finally, center the text:

#welcome {
    text-align: center;
}

And it works: http://jsfiddle.net/29Aat/103/

Answer 2

If I understood you correctly you want the header completely in the center. But you didn't define nav width. Here's the updated fiddle:JSFiddle

Here's what I added:

nav {
    width: 100%;
}

#welcome h3 {
    text-align: center
}