页眉和页脚有白色边框吗？

Question

I know question like this get asked all the time and I apologize for asking again, but I can't seem to figure this out by myself. I'm trying to add a header and footer and I finally made it so they are positioned correctly, but they don't fill the entire area and are surrounded by white. How can I fix this?

https://codepen.io/jaydotxxx/pen/yOvLyv

# container {
  margin: 0 auto;
  padding:40px;
}

#header {
  z-index:0;

    height: 30px;
    background-color: black;
}
#footer {
  z-index:2;
    height: 30px;
    width:100%;
    padding:0px;
    position: relative;
    bottom: 0;
    background-color: black;
}
#image {
  z-index:1;
  height:1000px;
  width:100px;
  margin:20px auto;

  padding:50px;
  background-color:red;

}

Answer 1

I think you are looking for something like:

body {
  margin: 0;
}

Answer 2

Just as a general HTML/CSS tip related to what you're asking, a lot of web developers put:

* {
     margin: 0;
     padding: 0;
}

at the top of their main css file, which causes the browser to clear all default paddings and margins (which are arbitrary, set by the vendors) so as to make their pages appear the same in every browser. Obviously, you will need to tweak some things to your liking later.