Unwanted space inbetween image and Heading

Question

There is some space inbetween an image(that has a border) and a division below it. The image's id is varImg and there is space inbetween it and #div2. I've set both margin and padding on the image and the division but it didn't work.I'd really really appreciate an answer.

Here's my code:

#first {
  background-image: url('themaogate.jpg');
  background-repeat: no-repeat;
  background-size: 105%;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

div {
  margin: 0;
  padding: 0;
}

#div1 {
  background-color: white;
  margin: 0;
  padding: 0;
}

#varImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-color: black;
  border-width: 0 1.5in .5in 1.5in;
  margin: 0;
  padding: 0;
}

jpg {
  line-height: 0px;
  height: 100%;
}

#div1 {
  background-color: black;
}

#div2 {
  text-align: right;
  margin: 0;
}

<div id="div1">
  <nav id="nav2" class="centerAlign">
    <ul id="ul1">
      <p>We offer a variety of services including:</p>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Soccer</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Table Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#'">Tabata, Aerobics, Zumba, Workouts and Dance</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Events and Team building</button></li>
    </ul>
  </nav>
  <img id="varImg" src="">
</div>
<div id="div2">
  <h1>Welcome to The #!</h1>
  <img id="img1" src="#.jpg">
  <p>###</p>
</div>

Answer 1

Your h1 inside #div2 still has some top margin. Setting it to zero should fix it:

#div2 h1 {
  margin-top: 0;
}

#first {
  background-image: url('themaogate.jpg');
  background-repeat: no-repeat;
  background-size: 105%;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}



div {
  margin: 0;
  padding: 0;
}

#div1 {
  background-color: white;
  margin: 0;
  padding: 0;
}

#varImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-color: black;
  border-width: 0 1.5in .5in 1.5in;
  margin: 0;
  padding: 0;
}

jpg {
  line-height: 0px;
  height: 100%;
}

#div1 {
  background-color: black;
}

#div2 {
  text-align: right;
  margin: 0;
}

<div id="div1">
  <nav id="nav2" class="centerAlign">
    <ul id="ul1">
      <p>We offer a variety of services including:</p>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Soccer</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Table Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#'">Tabata, Aerobics, Zumba, Workouts and Dance</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Events and Team building</button></li>
    </ul>
  </nav>
  <img id="varImg" src="">
</div>
<div id="div2">
  <h1>Welcome to The #!</h1>
  <img id="img1" src="#.jpg">
  <p>###</p>
</div>