строки таблицы прячутся под navbar

Question

У меня есть таблица, но верхняя часть таблицы скрыта под панелью навигации, как показано на рисунке ниже, поэтому мне пришлось использовать br, чтобы показать ее на странице. Почему это происходит? как я должен сделать это видимым, не используя br, margin и padding. Я пытаюсь понять это за последние несколько часов. заранее спасибо

  .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">&nbsp;&nbsp;SAVED LISTS</i></button>
          </li>
          <li class="nav-item navpull">
            <button class="btn btn-light"> <i class="fa fa-filter" aria-hidden="true">&nbsp;&nbsp;SAVED FILTER</i></button> 
          </li>     
          <li class="nav-item navpull">
            <button class="btn btn-light"> <i class="fa fa-history" aria-hidden="true">&nbsp;&nbsp;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>&nbsp; 
        <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>

ссылка на стек *

Answer 1

body{
padding-top:60px;
}

сделает вещь