0

Edit
Apparently my question is similar to a question about the margin width of a document's body. Which is kind of odd, because that question itself is the answer to mine. It's the answers here which refer to that question, and since I'm asking for those answers I can't know that. Hope this makes sense.

I have a webpage with fixed header and footer, for which I set the width to 100%. Nevertheless there is an 8 pixel gap to the left of both. How do I get rid of them?

CSS

#main {
  width: 1200px;
  height: 100%;
  margin: 60px auto 0 auto;
  padding: 1em;
}

/* pertaining header  ------------------------------------ */

header, #main::before {
  height: 60px;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  background: linear-gradient(180deg, #91C1CC, #468795);
  border-bottom: 1px solid black;
}
header div {
  width: 1200px;
  margin: 0 auto;
  padding: 0;
}
header div p {
  margin-top: 16px;
  margin-left: 1000px;
  font-family: Whitehall, Verdana, Geneva, sans-serif;
  font-size: 2.5em;
  color: white;
}

/* pertaining footer ------------------------------------ */

#container::after {
  content: "";
  display: block;
}
footer, #main::after {
  height: 40px;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: auto;
  background: linear-gradient(0, #91C1CC, #468795);
  border-top: 1px solid black;
}
footer div {
  width: 1200px;
  margin: auto;
  padding: 1em;
}
#departments {
  margin: 0;
  padding: 0 1em;
  margin-top: -8px;
  margin-left: -22px;
  font-size: 85%;
}

#departments a {
  margin-right: 3em;
  color: black;
}
#departments a:link, #departments a:visited {
  text-decoration: none;
}

JSfiddle at https://jsfiddle.net/stevenvh/65dao4pt/5/

stevenvh
  • 2,971
  • 9
  • 41
  • 54

3 Answers3

1

The 8 pixel gap is cause by the HTML body tag, it has a default margin of 8px on all the four sides.

To get ride of all the gap around the element, just use CSS property of margin: 0; like this,

body {
  /* to remove gaps from four sides */
  margin: 0;
}

Working Example:

@font-face {
  font-family: Whitehall;
  src: url('fonts/Whitehall.woff') format('woff'), url('fonts/Whitehall.ttf') format('truetype');
}

body {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 1.6em;
  
  /* to remove gaps from four sides */
  margin: 0;
}

#main {
  width: 1200px;
  height: 100%;
  margin: 60px auto 0 auto;
  padding: 1em;
}


/* pertaining header  ------------------------------------ */

header,
#main::before {
  height: 60px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  background: linear-gradient(180deg, #91C1CC, #468795);
  border-bottom: 1px solid black;
}

header div {
  width: 1200px;
  margin: 0 auto;
  padding: 0;
}

header div p {
  margin-top: 16px;
  margin-left: 1000px;
  font-family: Whitehall, Verdana, Geneva, sans-serif;
  font-size: 2.5em;
  color: white;
}


/* pertaining footer ------------------------------------ */

#container::after {
  content: "";
  display: block;
}

footer,
#main::after {
  height: 40px;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: auto;
  background: linear-gradient(0, #91C1CC, #468795);
  border-top: 1px solid black;
}

footer div {
  width: 1200px;
  margin: auto;
  padding: 1em;
}

#departments {
  margin: 0;
  padding: 0 1em;
  margin-top: -8px;
  margin-left: -22px;
  font-size: 85%;
}

#departments a {
  margin-right: 3em;
  color: black;
}

#departments a:link,
#departments a:visited {
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Test</title>
</head>

<body>

  <div id="container">
    <header>
      <div>
        <p>Main title</p>
      </div>
    </header>

    <div id="main">

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
        faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
        metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
        augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
        faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
        metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
        augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
        faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
        metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
        augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam
        faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui. Vivamus bibendum, mauris vitae hendrerit aliquam,
        metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue
        augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>

    </div>

    <footer>
      <div>
        <p id="departments">
          &#9724; <a href="#">About</a> &#9724; <a href="#">Contact</a> &#9724; <a href="#">Sitemap</a>
        </p>
      </div>
    </footer>
  </div>

</body>

</html>
Kumara
  • 480
  • 1
  • 4
  • 13
1

HTML's body tag has a margin on all sides set by default. By adding margin: 0 to your body you can fix that quite easily.

    @font-face {
      font-family: Whitehall;
      src: url('fonts/Whitehall.woff') format('woff'),
           url('fonts/Whitehall.ttf') format('truetype');
    }

    body {
      font-family: Verdana, Geneva, sans-serif;
      line-height: 1.6em;
      margin: 0;
    }

    #main {
      width: 1200px;
      height: 100%;
      margin: 60px auto 0 auto;
      padding: 1em;
    }

    /* pertaining header  ------------------------------------ */

    header, #main::before {
      height: 60px;
    }
    header {
      position: fixed;
      top: 0;
      width: 100%;
      margin: auto;
      background: linear-gradient(180deg, #91C1CC, #468795);
      border-bottom: 1px solid black;
    }
    header div {
      width: 1200px;
      margin: 0 auto;
      padding: 0;
    }
    header div p {
      margin-top: 16px;
      margin-left: 1000px;
      font-family: Whitehall, Verdana, Geneva, sans-serif;
      font-size: 2.5em;
      color: white;
    }

    /* pertaining footer ------------------------------------ */

    #container::after {
      content: "";
      display: block;
    }
    footer, #main::after {
      height: 40px;
    }
    footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      margin: auto;
      background: linear-gradient(0, #91C1CC, #468795);
      border-top: 1px solid black;
    }
    footer div {
      width: 1200px;
      margin: auto;
      padding: 1em;
    }
    #departments {
      margin: 0;
      padding: 0 1em;
      margin-top: -8px;
      margin-left: -22px;
      font-size: 85%;
    }

    #departments a {
      margin-right: 3em;
      color: black;
    }
    #departments a:link, #departments a:visited {
      text-decoration: none;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
</head>  
  
<body>

<div id="container">
    <header>
      <div>
        <p>Main title</p>
      </div>
    </header>

    <div id="main">

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit.  Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit.  Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit.  Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sem quam. Donec vehicula sed urna a tempor. Mauris facilisis malesuada varius. In ut dapibus lorem. Nullam iaculis tortor eget mauris sagittis, sed elementum mi semper. Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat. Duis elementum, nulla at pulvinar pharetra, ligula purus scelerisque libero, quis fermentum dui ante blandit dui.
Vivamus bibendum, mauris vitae hendrerit aliquam, metus quam elementum est, sed viverra enim ipsum nec dui. Duis rutrum, eros a dignissim laoreet, enim justo feugiat massa, et pretium ex ligula et nunc. Praesent quis quam scelerisque, hendrerit diam in, suscipit felis. Curabitur iaculis congue augue, sit amet rutrum nisi luctus id. Praesent ac massa quis ligula fermentum laoreet. Vivamus sed faucibus elit.  Aliquam faucibus vel felis quis tempus. Pellentesque cursus risus at venenatis volutpat.
      </p>

    </div>

<footer>
  <div>
    <p id="departments">
      &#9724; <a href="#">About</a>
      &#9724; <a href="#">Contact</a>
      &#9724; <a href="#">Sitemap</a>
    </p>
  </div>
</footer>
</div>

</body>
</html>
Pelicer
  • 1,348
  • 4
  • 23
  • 54
0

As you've set the header as position: fixed; you could add left: 0; to the header and it will force it to the left. Then you don't need to set the width.

pistevw
  • 432
  • 4
  • 15