Side menu should be the height of page

I Have a side menu that you can see here on my picture. I would like it to take the full height of page there is a lite bit missing on top and a lot missing at the bottom of my page. I have added a red square around those areas. I am also using bootstrap but have added some CSS. How can I fix this?

.nav {
  background-color: #f2f2f2;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


ul {
  padding: 0;
  list-style: none;
  background: #f2f2f2;
}

  ul li {
    position: relative;
    line-height: 21px;
    text-align: left;
  }

    ul li a {
      display: block;
      padding: 8px 25px;
      color: #333;
      text-decoration: none;
    }

      ul li a:hover {
        color: #fff;
        background: #939393;
      }

    ul li ul.dropdown {
      min-width: 100%; /* Set width of the dropdown */
      background: #f2f2f2;
      display: none;
      position: absolute;
      z-index: 999;
      left: 0;
    }

    ul li:hover ul.dropdown {
      display: block; /* Display the dropdown */
    }

    ul li ul.dropdown li {
      display: block;
    }

.contract-menu {
  padding: 0px;
}

.active {
  color: #ffffff !important;
  background-color: #2772b2;
}

  <div class="row">
    <div class="col-3 contract-menu">
      <ul class="dropdown">
        <li>
          <a class="nav-link active" (click)="ShowDiv(0)"  *ngIf="currentStepId == 0">Overview</a>
          <a class="nav-link" (click)="ShowDiv(0)"  *ngIf="currentStepId != 0">Overview</a>
        </li>
        <li *ngFor="let step of steps">
          <a class="nav-link active" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId == step.stepId">{{step.stepName}}</a>
          <a class="nav-link" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId != step.stepId">{{step.stepName}}</a>
        </li>
      </ul>
    </div>

                                     SOME CODE HERE
                                          ...

</div>

UPDATE

I am now able to make the menu take the hole space in the height as you can see on my image. However there is still some white on the sides of my menu which I do not like.

Here is my update html

<div *ngIf="steps">
  <div class="contract-container">
    <div class="contract-menu menu">
      <ul class="dropdown">
        <li>
          <a class="nav-link active" (click)="ShowDiv(0)"  *ngIf="currentStepId == 0">Overview</a>
          <a class="nav-link" (click)="ShowDiv(0)"  *ngIf="currentStepId != 0">Overview</a>
        </li>
        <li *ngFor="let step of steps">
          <a class="nav-link active" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId == step.stepId">{{step.stepName}}</a>
          <a class="nav-link" (click)="ShowDiv(step.stepId)" *ngIf="currentStepId != step.stepId">{{step.stepName}}</a>
        </li>
      </ul>
    </div>
    <div class="inner-page">
</div>
</div>

Here is my update CSS

.nav {
  background-color: #f2f2f2;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


ul {
  padding: 0;
  list-style: none;
  background: #f2f2f2;
}

  ul li {
    position: relative;
    line-height: 21px;
    text-align: left;
  }

    ul li a {
      display: block;
      padding: 8px 25px;
      color: #333;
      text-decoration: none;
    }

      ul li a:hover {
        color: #fff;
        background: #939393;
      }

    ul li ul.dropdown {
      min-width: 100%; /* Set width of the dropdown */
      background: #f2f2f2;
      display: none;
      position: absolute;
      z-index: 999;
      left: 0;
    }

    ul li:hover ul.dropdown {
      display: block; /* Display the dropdown */
    }

    ul li ul.dropdown li {
      display: block;
    }

.contract-menu {
  padding: 0px;
}

.active {
  color: #ffffff !important;
  background-color: #2772b2;
}


.contract-container {
  display: flex;
  padding: 0;
}

.menu {
  background-color: #f2f2f2;
  height: 100vh;
  width: 250px;
}

.inner-page {
  width: calc(100vw - 0px);
}