the table rows is hiding under navbar - html

Question

I have a table but the top part of the table is hiding under the navbar like shown in the below picture so i had to use br to show it on the page.why it is happening? how should i make it visible without using br,margin and padding.i am trying to figure it out from past few hours. thanks in advance
.scroll {
overflow-y: auto !important;
height: calc(100vh - 54px);
}
.search-wrapper{
flex-grow: 1;
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #c2c9d2;
}
.btn-outline-secondary:hover{
background-color: white;
font-weight: 500;
border-bottom: 3px solid #23485B ;
}
.btn-outline-secondary{
color: #23485B;
border: thin;
}
.sidedivtext{
color: #23485B;
}
.alert-dark{
background-color: #F5F5F5;
}
.bg-light{
background-color: #F5F5F5;
}
.text{
color: #797979;
}
.tableicons{
margin-right:25px;
opacity:60% ;
}
tr:hover .tableicons{
opacity:100% ;
}
.tablename{
padding-right:10vw;
}
.leftalign .tableicons {
padding-left: 0;
}
body{
padding-top: 60px;
}
.btn-primary{
background-color: #002B42;
font-size: 12px;
border-radius: 4px;
padding:10px;
}
.btn-light{
background-color: transparent;
border: none;
color: black;
font-size: 13px;
outline: none;
padding:10px;
margin-left: 20px;
}
#media only screen and (max-width: 768px) {
body{
padding-top: 0!important;
}
.navbar{
position: relative;
}
.navbar-nav{
align-items: center;
margin: 15px 0;
}
.nav-item{
margin:5px 0;
}
.navpull{
margin-right: 10px;
}
}
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<button class="navbar-toggler mr-5" type="button" data-toggle="collapse" data-target="#my-navbar" aria-controls="my-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="my-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<button type="button" class="btn btn-primary"><i class="fa fa-bars" aria-hidden="true"> SAVED LISTS</i></button>
</li>
<li class="nav-item navpull">
<button class="btn btn-light"> <i class="fa fa-filter" aria-hidden="true"> SAVED FILTER</i></button>
</li>
<li class="nav-item navpull">
<button class="btn btn-light"> <i class="fa fa-history" aria-hidden="true"> SEARCH HISTORY</i></button>
</li>
</ul>
</div>
<div class="my-2 my-md-0 search-wrapper">
<input class="form-control" name="search" [(ngModel)]="search" type="search" placeholder="Search" />
</div>
</nav>
<br><br><br>
<div class="container-fluid">
<section class="row">
<div class="col-md-9 col-12 overflow-auto scroll">
<table class="table table-hover">
<tr>
<th class="text">Date</th>
<th class="text">List Name</th>
<th class="text text-right">No. of Entities</th>
<th class="text">Actions</th>
<th class="text"></th>
</tr>
<tbody>
<tr *ngFor="let items of data | filter: search">
<td class="text-dark font-weight-bold">
<span *ngIf="items.date">{{items.date | date:'MMM dd' }}</span>
<span *ngIf="!items.date"><i class="fa fa-refresh"></i></span>
</td>
<td class=" font-weight-bold tablename {{items.color}}">{{ items.name }}</td>
<td class="text-dark font-weight-bold text-right">{{ items.entities }}</td>
<td class="leftalign">
<span *ngFor="let x of items.actions.split(',')">
<i class="{{x}} tableicons"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
Details
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 col-12 overflow-auto scroll">
<div class="alert alert-dark"><span class="text">No description yet</span>
<span class="font-weight-bold sidedivtext">+Add Description</span>
</div>
<p *ngFor="let str of s" class="text-center text-primary">{{str}}</p>
</div>
</section>
</div>
stackblitz link

Answer 1

body{
padding-top:60px;
}
will do the thing