Remove small gap between nav and header - css

Question

My nav bar (which is at the top of the page) and header (below nav, which has a large image and a text on top of it), have a very small gap between them that I want to remove. I've visited a number of posts on similar problems, and tried their solutions, but can't seem to work for me, including: display: block; margin: 0; e.t.c.
I guess it has something to do with a style I have applied on either the header's content or the nav's content.
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>

Answer 1

Just define the height of nav
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden!important;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
height: 51px;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>

Answer 2

The problem is caused by your ul having overflow:hidden so just remove it.
Added box-sizing:border-box to avoid horizontal scrollbar
UPDATE
I noticed that you have an img as child of ul which makes that invalid HTML.
So I tweaked your code to make it valid.
*,
*::before,
*::after {
box-sizing: border-box
}
body,
html {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
#logo {
height: 50px;
width: auto;
display: inline-block;
vertical-align:top
}
nav {
margin-bottom: 0;
background-color: #1a1a1a;
border: 1px solid #e7e7e7;
}
nav ul {
list-style-type: none;
width: calc(100% - 60px);
margin:0;
padding: 0;
text-align: center;
display: inline-block;
vertical-align: top;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Games</h1>
</header>

Answer 3

Try setting the height of the nav:
nav {
height: 50px;
}
Tried it out and works even without the margin set to 0.