0

currently teaching myself how to code so it might not be the cleanest, but though I think I've gotten the hang of a few things, I can't figure out why there's a white border/padding/whatever it is around the body of my page.

Assuming it's something to do with the id main as the nav is within the body, but yet it's the only thing that doesn't have a border. The border isn't around each individual section, but rather around the outside of the whole page, with exception of the top.

Not promoting the website, but if I haven't explained the situation right, you can see what I mean at http://lifelongvagabonds.com

CSS Code (not all of it; just the parts that I think matter):

#header {
  position: relative;
  height: 25px;
  margin-bottom: -25px;
  width: 100%;
  clear:both;
  border-top: 1px solid #696969;
  background-color: #000000;
  text-align: center;
}

#nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #000000;
  background-repeat: no-repeat;
  text-align: center;
}
body {
  font-family: Oswald;
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;
  background-color: #4fd4c0;
 }

#main {
  font-family: Georgia, serif;
  width: 100%;
  float: center;
  font-size: large;
  margin-top:41px;
  background: #4fd4c0 url("file:///home/mri/Desktop/lifelongvagabonds/pics/bg.jpg")  repeat-y; /*  */
  background-size: 100%;
  border-radius: 0;
  overflow: auto;
  color: #1c1d1c;
}

#section {
  width: 55%; 
  min-width: 320px;
  float: left;
  margin-left: 8%;
  padding: .5% 1.5% .5% 1.5%;
  display: inline-block;
  min-width: 280px;
  background-color: #ffffff;
  margin-top: 1%;
  margin-bottom:2.5%;
}
#footer {
  position: relative;
  bottom: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #696969;
  background-color: #000000;
  text-align: center;
  color: #ffffff;
}
#aside {
  width: 23%;
  min-width: 200px;
  margin-right: 8%;
  float: right;
  background-color: #dff3f0;
  padding: .7%;
  margin-top: 1%;
  text-align: center;
  display: inline-block;
}

Cheers, Mri

Mri
  • 1
  • 1
  • Okay, now I'm thinking it's not something to do with the id main as if I change the footer to be absolute, it no longer has a border around the bottom of the page. Obviously, that sticks my footer in the wrong spot though, so can't do that and it doesn't get rid of the padding at the sides anyway. So I have no freaking idea. – Mri Oct 06 '16 at 10:41
  • Look at the question linked above in the "This question already has an answer here:" banner. – Turnip Oct 06 '16 at 10:53
  • Hi Turnip, Thanks for the link (it didn't pop up as a possible duplicate at the start) However, I've tested similar answers before I posted, but they don't seem to be working for me. The background color for my body is blue, so I know it has something to do with that. I've included border:0; margin:0; padding:0; outline:0; in the css for the body and nothing has worked to get rid of it. – Mri Oct 06 '16 at 11:52
  • Adding `margin: 0` to your `` tag in Chrome dev tools removes the gap. – Turnip Oct 06 '16 at 12:34

0 Answers0