How do I get rid of the white space on the header and where the images are?

Question

https://i.stack.imgur.com/skw4r.jpg There's a space between the header and navigation bar and every time I insert an image it splits the page. I want the image to actually be on the background image instead of it making a white space.

img {
  margin: 10px;
  height: 170px;
  width: 170px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px;
}

@font-face {
  font-family: Moon Light;
  src: url(MoonLight.otf);
}

#header {
  background-position: top;
  margin: 0;
  padding: 10px;
  text-align: center;
  color: #ffb400;
}

h1 {
  font-family: Moon Light;
  background-image: url(polygon.jpg);
  margin: 0;
}

p {
  color: white;
  font-family: Moon Light;
  text-align: center;
  padding: 16%;
  font-weight: bold;
  font-size: 30px;
  background-image: url(polygon.jpg);
  margin: 0;
}

#footer {
  font-family: Moon Light;
  clear: both;
  position: relative;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
  border-bottom: 1px solid #ff3400;
  border-top: 1px solid #ff3400;
  background-color: #ffb400;
  color: #ff004b;
}

h3 {
  text-align: center;
  padding: 7%;
  background-image: url(polygon.jpg);
  margin: 0;
  font-family: Moon Light;
  color: #ffb400;
  font-size: 30px;
}

ul {
  font-family: Moon Light;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff3400;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ff004b;
}

.active {
  background-color: #ffb400;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <title>LOS BANTOS CUSTOMS</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="DERENTWURF.css">


</head>

<BODY>

  <div id=header>
    <h1> MODDING YOUR DREAM CAR INTO REALITY! </h1></div>
  <ul class="side-nav">
    <li><a class="active" href="HOMIEPAGE1.html">HOME</a></li>
    <li><a href="SERVICES.html">SERVICES</a></li>
    <li><a href="GALLERY.html">GALLERY</a></li>
    <li><a href="ABOUTUS.html">ABOUT US</a></li>
    <li><a href="CONTACT.html">CONTACT</a></li>
  </ul>

  <p> Welcome to Los Bantos Customs! At L.B. we modify cars to your liking and provide you with our high-end services such as window tinting, respraying, window tinting and much more.

    <div id="container">"<img src="https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/s640x640/sh0.08/e35/11917979_826159337505466_283957219_n.jpg" alt="amg">
      <img src="https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s640x640/sh0.08/e35/12237239_1004549372948855_1839675769_n.jpg" alt="purple honda">
      <img src="https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/s640x640/sh0.08/e35/11934798_1620845201507358_1198463095_n.jpg" alt="MINT MOD">
      <img src="https://scontent.cdninstagram.com/hphotos-xtf1/t51.2885-15/s640x640/sh0.08/e35/11348091_579493905523184_1921894326_n.jpg" alt="Sliver mod">
      <img src="https://scontent.cdninstagram.com/hphotos-xat1/t51.2885-15/s640x640/sh0.08/e35/11350873_1516346318690198_385687089_n.jpg" alt="subaru red mod">
      <img src="https://scontent.cdninstagram.com/hphotos-xpt1/l/t51.2885-15/s640x640/sh0.08/e35/12338587_567880666702430_1666379795_n.jpg" alt="FWD SUK">
      <img src="https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/s640x640/sh0.08/e35/12141836_701952009904466_2099670799_n.jpg" alt="SHIRO DEVIL">
      <img src="https://scontent.cdninstagram.com/hphotos-xat1/t51.2885-15/s640x640/sh0.08/e35/12139887_1662246847325829_754159365_n.jpg" alt="BLUE WING">
      <img src="https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s640x640/sh0.08/e35/11350837_183170668693850_989498919_n.jpg" alt="SUPRA"></div>
    <p>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
      </a>
    </p>


    <div id=footer>
      Nia Daniels/ FINAL EXAM/ CIST1510-Web Development I (21401)
    </div>


</body>

</html>

Could you upload the background image somewhere & link it into the correct place in your code? Currently it's not possible to reproduce your problem. — AStopher, Dec 15 '15 at 18:30
Possible for a link to the page itself? Might be easier to see it in action. Right now you can't reproduce the error as is. — CMG, Dec 15 '15 at 18:39
Your question is a bit unclear. Maybe this will help: http://stackoverflow.com/q/31444891/3597276 — Michael Benjamin, Dec 15 '15 at 18:45
https://www.dropbox.com/s/4162muolbioe4je/depechemode.zip?dl=0 — Nina Daniels, Dec 15 '15 at 18:52

kiaaanabal · Accepted Answer · 2015-12-15T19:11:10.123

-1

If you are using an img tag within your header, your problem is the 10px of padding. Try removing that and see if it works.

EDIT:

As far as the cars being on the background-image, you need to restructure your css. I would put the background-image on the BODY and remove it from your headings.

edited Dec 15 '15 at 19:11

answered Dec 15 '15 at 18:50

kiaaanabal

366
2
12

It worked but now I'm just trying to figure out how i can get the car images to be on the back ground image i already have. – Nina Daniels Dec 15 '15 at 19:02
I think you should restructure your css a bit. Try putting the background-image on the BODY tag with a size of cover and remove it from all the other random places you have it. That way the background will be EVERYWHERE. – kiaaanabal Dec 15 '15 at 19:09

How do I get rid of the white space on the header and where the images are?

1 Answers1