Nothing is center????!!!???

Hello can someone tell me what I am doing wrong.

I cannot get anything to center smack, bang, right there in the middle of the page

https://jsfiddle.net/byc0a8zh/1/

 

Why are you using a SPAN instead of a heading? Spans are inline level elements why do you want it display:block? Everything is centering its TEXT content as it should, so what are you expecting to center? do you mean the block level containers? Those aren't TEXT, what makes you think text-center would effect them? (unless you're learning from a resource that hasn't been updated since IE5 was the norm). That's auto margin's job.

Also PX around text is an epic /FAIL/ at web development. Most of the time someone says to use pixels in your CSS they're ignorant twaddles you need to tell to sod off. The WCAG says to use EM, so use 'em!

Also JSFiddle automatically creates your HTML and BODY tags, so you've got those twice in the output source. One of the reasons I consider JSFiddle to be total shite. Just like how I consider HTML 5's idiotic HEADER tag to be equal trash since we already have perfectly good numbered headings.

I'd give you a working rewrite, but it's hard to decipher what it is you're even trying to accomplish when you have a complete lack of actual semantics.

 

Well to style the text, wouldn't it be appropriate to make it a span if it's not a heading? I'm really just playing around with CSS.

I have updated to code a little.
Well, I'm really just fiddling around the .wrapper class on the div is not centering the div element perfectly under the text elements.
It has auto margin applied?

https://jsfiddle.net/byc0a8zh/2/

Regards
Chris

 

header div:nth-child(1), header div:nth-child(2) {
float: left;
}
You are floating header nested div.
Remove float left and add margin: 0 auto;
header div:nth-child(1), header div:nth-child(2) {
margin: 0 auto;
}