Tempate Demo Help

[vipercode]

I have created a template trying to use the modern html 5 way but columns can't seem to get the right with and margin. also with having borders on some parts it makes it look bigger but not I have created a link for you all to see feel free to play around with it and if you have ago tell me what you think I have done wrong so I can learn

Here is the link http://codepen.io/vipercode/pen/eGyDz

Full Page View Link is Here: http://codepen.io/vipercode/full/eGyDz

I also would like each section to have a background width 100% with different Colors. And the container stays at 960px;

I use to do it ok with html 4 but not new html 5 won't take me long to learn once I get a demo from somewhere.

[Excavator]

Good morning vipercode,
You should check this with the validator. You have title and meta in the body of the document. You also re-use #main a lot.

Your .col's don't make three columns because you don't follow the box model.
See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

---An example of your box model being off:
header#main is 60em wide
In that you put 60em wide #logo PLUS 2px of borders.

You also don't clear your floats.
One handy thing about using overflow: auto; to clear floats with is it will show you when your box model is off by giving you a scrollbar.

[vipercode]

Going to watch some more learning videos on html 5 elements etc.

Originally Posted by Excavator

Good morning vipercode,
You should check this with the validator. You have title and meta in the body of the document. You also re-use #main a lot.

Your .col's don't make three columns because you don't follow the box model.
See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

---An example of your box model being off:
header#main is 60em wide
In that you put 60em wide #logo PLUS 2px of borders.

You also don't clear your floats.
One handy thing about using overflow: auto; to clear floats with is it will show you when your box model is off by giving you a scrollbar.