Fixed navbar, white gap, why? - html

Question

I want to ask you why i get this white gap when i want to do fixed scroll navbar on top ? Do you guys have any sugestion in this situation ? The menu should get on the background image. I have tried to do something with the background but it doesnt help.
Here is the pic of gap:
https://ibb.co/RcvM5nS
And here is the code:
.background {
background-color: #000000;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 650px;
width: 100%;
}
/*menu*/
#siteNav {
margin: 0 auto;
position: fixed;
width: 100%;
height: 50px;
box-sizing: border-box;
top: 0;
left: 0;
transition: 0.3s;
}
#siteNav.scroll {
background: rgba(0, 0, 0, 0.8);
height: 80px;
padding: 10px 80px;
}
#siteNav .logo {
padding: 10px;
height: 40px;
float: left;
transition: 0.3s;
}
#siteNav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
}
#siteNav ul li a {
line-height: 50px;
padding: 6px 30px;
text-decoration: none;
transition: 0.3s;
color: #ffffff;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li>MISSION</li>
<li>CLIENTS</li>
<li>PRODUCTS</li>
<li>CONTACT</li>
</ul>
</nav>
<!--header-->
<div class="background">
<header>
<div>
<h1><br><a></a></br>
</h1>
</div>
</header>
</div>

Answer 1

The problem is with h1 margin top. Remove that and it will work.
Also i suggest you use <header> tag as a first level tag which includes the nav.
Anyway, here's the solution.
I added margin:0 to body because here it has a default margin of 8px
.background {
background-color: #000000;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 650px;
width: 100%;
}
/*menu*/
#siteNav {
margin: 0 auto;
position: fixed;
width: 100%;
height: 50px;
box-sizing: border-box;
top: 0;
left: 0;
transition: 0.3s;
}
#siteNav.scroll {
background: rgba(0, 0, 0, 0.8);
height: 80px;
padding: 10px 80px;
}
#siteNav .logo {
padding: 10px;
height: 40px;
float: left;
transition: 0.3s;
}
#siteNav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
}
#siteNav ul li a {
line-height: 50px;
padding: 6px 30px;
text-decoration: none;
transition: 0.3s;
color: #ffffff;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
h1 {
margin-top:0;
}
body {
margin:0
}
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li>MISSION</li>
<li>CLIENTS</li>
<li>PRODUCTS</li>
<li>CONTACT</li>
</ul>
</nav>
<!--header-->
<div class="background">
<header>
<div>
<h1><br /><a></a>
</h1>
</div>
</header>
</div>

Answer 2

Soulution 1 :
Add padding: 6em 0 3em; to <div> below the <nav>
Soulution 2 :
Get rid of <h1>
The code snippet apply the first solution
.background {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 650px;
width: 100%;
padding: 6em 0 3em;
}
/*menu*/
#siteNav {
margin: 0 auto;
position: fixed;
width: 100%;
height: 50px;
box-sizing: border-box;
top: 0;
left: 0;
transition: 0.3s;
}
#siteNav.scroll {
background: rgba(0, 0, 0, 0.8);
height: 80px;
padding: 10px 80px;
}
#siteNav .logo {
padding: 10px;
height: 40px;
float: left;
transition: 0.3s;
}
#siteNav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
}
#siteNav ul li a {
line-height: 50px;
padding: 6px 30px;
text-decoration: none;
transition: 0.3s;
color: #000000;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li>MISSION</li>
<li>CLIENTS</li>
<li>PRODUCTS</li>
<li>CONTACT</li>
</ul>
</nav>
<!--header-->
<div class="background">
<header>
<div>
<h1><br><a></a></br>
</h1>
</div>
</header>
</div>

Answer 3

I think you have used <h1> tag in your HTML code and that is having default margins set in it. if you just handle that, it will resolve your problem.