I'm building a test page just to learn the whole process from start to finish, rather than little bits of tutorials. I've hit a stop though, I can't seem to get the margin at the top of the page to go away. I'd like to be filled with my header color. This is HTML5 by the way. I have nothing in my header as of now:

http://imgur.com/OTUPB.png

And this is the CSS:

header {
height: 110px;
width: 100%;
background-image: url(images/header.png);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43,62,253)), to(rgb(63,117,255)));
}

I plan on making this work in everything but IE for now. I just want to get CSS down, and worry less about IE. Also, I can't figure out how to get it to span the whole page. I'd like the nav bar to go from edge to edge. Any help is appreciated.

  • It's hard to tell from the image exactly what's going on. It always helps to have a live page to play with for debugging. If it's not already online, http://jsbin.com/ is a good place to put up a small testcase. Doug over 6 years ago
  • I edited your question to make the URL a link. Doug over 6 years ago

2 answers

2
points

Have you reset the browser defaults?

body will have some default padding, elements may have default margins.

see: http://html5doctor.com/html-5-reset-stylesheet/

and read up on why browser resets are a good (and bad) idea.

Answered over 6 years ago by Tony Crockford
0
points

By default your browser will have a margin around the outside of your content if you aren't using a reset or haven't set the defaults for body.

Look into what Tony said above and if you aren't, use a reset. If not, try

body {
  margin:0;
  padding:0;
}
Answered over 6 years ago by VagrantRadio