A border between div and footer

Question

I have a problem, I have an empty div, taking 100% of the screen, and a footer. A border is appearing between them (it's a part of the body, so I guess there is some space between the both divs).

The css is :

body {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
}

body {
    background-color: #292a2b;
}

.emptydiv {
    width: 100%;
    height: 100%;
    background-color: black;
    margin-top: 50px;
}

h1 {
    /*editing h1 just to add margin on the top; in this way the navbar won't hide it!*/
    text-align: center;
    color: white;
}
/* footer*/
#githublogo,
#instagram-logo {
    width: 50px;
    height: 50px;
}

footer {
    background-color: rgb(0, 0, 0);
    color: white;
    margin : 0;
    padding: 0;
}

footer a {
    text-decoration: underline;
}

I tried to add padding 0 and margin 0 to both div, didn't work, what should I try ? THanks !