Only Internet Explorer shows 1px unwanted space - html

Question

When opening the site in IE, there's unwanted 1px space under the footer. Chrome and Firefox shows correctly like I want (that means margin-bottom: 0).
The same bug appears while hovering the navigation items. There's 1px visible space. Again, only IE.
I would like to know why this is happening.
* {
padding: 0;
margin: 0;
}
header {
background: brown;
height: 100px;
width: auto;
min-width: 1200px;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
h1 {
color: white;
font-family: calibri;
text-align: center;
padding-top: 25px;;
padding-left: 10px;
}
nav {
min-width: 1200px;
}
nav ul {
background: grey;
text-align: center;
-webkit-box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.75);
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 20px;
font-family: verdana;
}
nav ul li:hover {
background: black;
cursor: pointer;
}
section {
background: darkblue;
height: 200px;
width: 500px;
margin-top: 20px;
margin-left: 15px;
}
article {
background: gold;
height: 800px;
width: 500px;
margin-top: 10px;
margin-left: 15px;
}
aside {
background: orange;
height: 1010px;
width: 600px;
float: right;
margin-top: -1010px;
margin-right: 20px;
}
div#content {
background: none;
width: 1200px;
margin: auto;
}
p {
text-align: center;
}
p#sider, #article, #section {
padding-top: 20px;
padding-left: 20px;
}
footer {
background: brown;
height: 40px;
width: auto;
margin-top: 20px;
margin-bottom: 0;
}
p#credits {
font-size: 15px;
font-family: verdana;
float: left;
margin-top: 10px;
margin-left: 15px;
}
p#logo {
font-size: 15px;
font-family: verdana;
float: right;
margin-top: 10px;
margin-right: 15px;
font-weight: bold;
}
#logoname {
heigh: 200px;
width: 200px;
margin: auto;
position: relative;
left: -40px;
top: -40px;
}
article, section, aside {
font-family: verdana;
font-size: 20px;
text-align: left;
}
<header>
<h1>Logo Picture</h1>
<div id="logoname">
<img src="http://www.ssbwiki.com/images/thumb/9/9a/DKSymbol%28preBrawl%29.png/50px-DKSymbol%28preBrawl%29.png">
</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Reference</li>
<li>Contact</li>
</ul>
</nav>
<div id="content">
<section>
<p> Hello there! This is a section and here it will be some pretty content about something pretty nice. </p>
</section>
<article>
<p> Hello again. This is an article about something new. What happened lately. You see?</p>
</article>
<aside>
<p id="sider">This is a sider. It is onn the left side of the website.
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website
This is a sider. It is onn the left side of the website</p>
</aside>
</div>
<footer>
<p id="credits">Copyright 2015 | All rights reserved</p>
<p id="logo">Logo Name</p>
</footer>

Answer 1

Make sure you set properties for the body as well. so
body{margin:0;padding:0;width:100vw;height:100vh;}
IE is that annoying browser that unfortunately lots of people still use, but the body in every browser usually needs to be set like this.