Gap between background image and image in html - html

Question

There is a gap between my background image and I wish to close that gap. How would I go around doing that?
I have tried removing the text, setting margins to 0, removing whitespace, placing the divs inline with each other, setting the background image as a standalone image in HTML, changing the height of the image. I am stumped!
HTML:
<div class="main">
<h1 id="mainTitle">Sample Text</h1>
<hr>
<i class="fa fa-id-card" aria-hidden="true"></i><h3 id="underTitle">Sample Text</h3>
</div>
<input type="submit" class="btn" value="Sample Text">
<div class="projects">
<h1 id="proTitle">Sample Text</h1>
<img src="images/codebg.jpg" alt="Sample Text" id="codeimg">
</div>
CSS:
html, body{
font-family: 'Thasadith', sans-serif;
background-image: url(images/bg.png);
background-repeat: no-repeat;
}
.main{
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
top: 350px;
font-size: 0;
margin: 0 auto;
}
#mainTitle{ font-size: 100px;}
#underTitle{ font-size: 50px; margin-top: 10px;}
#mainTitle, #underTitle{
transition: font-size 1s;
}
#mainTitle:hover{
font-size: 110px;
}
#underTitle:hover{
font-size: 60px
}
.fa-id-card{
position: absolute;
transform: translateX(-125px);
top: 77%;
font-size: 20px;
}
hr{
margin: 0 auto;
padding: 0;
background-color: black;
}
.btn{
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
top: 560px;
width: 100px;
background-color: black;
color: white;
transition: width 1s ease;
}
.btn:hover{
color: white;
width: 110px;
}
.projects{
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
top: 1100px;
/*background-image: url(images/codebg.jpg);*/
width: 100%;
height: 100%;
margin: 0 auto;
}
#proTitle{
color: black;
margin: 0 auto;
}
#codeimg{
opacity: 0.4;
}
Ideally, there should be no gap between the images
Thanks for any help anyone is able to provide

Answer 1

You can change the position type of your image.
Add this code in your CSS file:
img
{
position: relative;
bottom: -4px;
}
I recreate your code changing the images.
You can see in this link:
https://codepen.io/mvinnicius/pen/aPyObB
I hope help you

Answer 2

Here are some minor changes that make it work:
CSS: Add break.before and break.after styles for your title id's
#mainTitle{
font-size: 100px;
break.after: 0; }
#underTitle{
font-size: 50px;
margin-top: 10px;
break.before: 0; }
#mainTitle, #underTitle{
transition: font-size 1s; }
#mainTitle:hover{
font-size: 110px;
break.after: 0; }
#underTitle:hover{
font-size: 60px;
break.before: 0; }
HTML: Trade <div class="main"> for the Semantically correct <main>, then instead of using <h1> and <h3>(which force space around them), wrap it in a <p> tag.
<main>
<div>
<p><span id="mainTitle">Sample Text</span>
<hr>
<i class="fa fa-id-card" aria-hidden="true"></i><span id="underTitle">Sample Text</span>
</p>
</div>
<input type="submit" class="btn" value="Sample Text">
<div class="projects">
<h1 id="proTitle">Sample Text</h1>
<img src="images/codebg.jpg" alt="Sample Text" id="codeimg">
</div>
</main>

Answer 3

play with .projects css
top and left