Wrapper not aligning to the top of the page - html

Question

I get a space between my wrapper and the top of the page. I've tried a lot of fixes, but none that works.
The background image covers the background and is aligned to the top, but the wrapper, which has another background, seems to have a margin..
body {
height: 100vh;
background: url("https://i.imgur.com/HgflTDf.jpg") 50% fixed;
background-size: cover;
}
.wrap {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
background: rgba(17, 71, 114, 0.85);
top: 0;
}
.login {
border-radius: 2px 2px 5px 5px;
padding: 10px 20px 20px 20px;
width: 90%;
max-width: 320px;
background: #ffffff;
position: relative;
padding-bottom: 80px;
}
input {
display: block;
padding: 15px 10px;
margin-bottom: 10px;
width: 100%;
border: 1px solid #ddd;
transition: border-width 0.2s ease;
border-radius: 2px;
}
input:focus {
outline: none;
color: #444;
border-color: 2196F3;
border-left-width: 35px;
}
.fa {
color: #fff;
font-size: 1em;
position: absolute;
margin-top: -47px;
opacity: 0;
left: 0;
transition: all 0.1s ease-in;
}
.fa:focus {
opacity: 1;
left: 30px;
transition: all 0.25s ease-out;
}
.tittel {
color: #444;
font-size: 1.2em;
font-weight: bold;
margin: 10px 0 30px 0;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.sub {
width: 100%;
height: 100%;
padding: 10px 10px;
background: #2196F3;
color: #444;
display: block;
border: none;
margin-top: 20px;
margin-bottom: 0px;
position: absolute;
left: 0;
bottom: 0;
max-height: 60px;
border: 0px solid rgba(0, 0, 0, 0.1);
border-radius: 0 0 2px 2px;
transform: rotateZ(0deg);
transition: all 0.1s ease-out;
border-bottom-width: 7px;
}
footer {
display: block;
padding-top: 50px;
text-align: center;
color: #fff;
font-weight: normal;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<div class="wrap">
<form action="" method="post" class="login needs-validation" novalidate>
<h4 class="tittel">Login</h4>
<input type="text" name="username" value="" placeholder="Username" required autofocus/>
<i class="fa fa-user"></i>
<input type="password" name="password" placeholder="Password" required>
<i class="fa fa-key"></i>
<input type="submit" class="sub" value="Login">
</form>
<footer>Company name</footer>
</div>
EDIT: The wrapper seems to be placed 30-40px below the top. The page can be scrolled down this exact length. Tried removing the padding in the .wrap, comment out the background for the body and played around in site inspector for Chrome, disabling and enabling css to see if any of it makes a difference, which it doesn't.

Answer 1

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0;
padding: 0;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
Credits to Jon Egeland

Answer 2

You have 20px padding in your wrap class, removing it will probably solve your issue -
Hope this is what you're looking for!

Answer 3

This works for me just fine, no padding needed:
.page-wrap {
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: left;
overflow: hidden;
margin: 0 auto;
}