White box at the bottom of a view - html

Question

At the bottom of my page/view i got a white box that i can't remove. When i inspect elements there's no elements in that space (not even body or html)
I've tried to set body to height:100%, no paddings, margins etc but it made no difference.
Sorry if i've provided too little code, just shout if you need more.
Here's my CSS:
.header {
border: 0px;
margin: 0px;
padding: 0px;
padding-bottom: 10px;
background-color: black;
color: white;
display: block;
text-align: center;
}
h1 {
border: 0px;
margin: 0px;
padding: 20px;
}
.container-fluid {
height: auto;
border: 0px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.btn btn-primary {
border: 20px;
}
.card {
align-items: center;
justify-content: center;
}
.card-body {
display: block;
padding: 0px;
}
.card-title > img {
margin-rigth: 5px;
}
.table {
font-size: 20px;
}
HTML:
#{
ViewData["Title"] = "Home Page";
}
<div class="header">
<h1>My Health Vision</h1>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-lg btn-block">Add new goal</button>
</div>
</div>
<div class="container-fluid">
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title"><img src="images/goal-icon.png" width="60" height="60" />My weigth goal</h4>
<table class="table">
<tbody>
<tr>
<th scope="row">Goal weigth</th>
<td>85</td>
</tr>
<tr>
<th scope="row">Deadline</th>
<td>2018-05-30</td>
</tr>
<tr>
<th scope="row">Current weight </th>
<td>90 <button type="button" class="btn btn-primary btn-sm">Update</button></td>
</tr>
<tr>
<th scope="row">Best weigth</th>
<td>87</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Updated with HTML.

Answer 1

Instead of using:
height: 100%;
Use:
height: 100vh;