There seems to be a persistent white box at the bottom of my page/view that I can't seem to remove. Even when inspecting elements, there are no visible elements present in that space, not even within the body or html tags. I have attempted various solutions such as setting the body height to 100%, removing padding and margins, but unfortunately, none of these actions have made any difference. Apologies if the provided code is insufficient, please let me know if more information is required.
Below is 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 weight</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 weight</th>
<td>87</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Updated with HTML.