When you move your mouse over the navbar links, you'll find that the hover background color of the link is smaller than the height of the navbar:

You can solve this issue by applying padding on the links instead of the navbar. Use the following SCSS code in the file to change the padding:

.navbar {
  @include media-breakpoint-up(md) {
    padding-top: 0;
    padding-bottom: 0;
  }
  .nav-link
  {
    padding: $spacer;
    @include media-breakpoint-only(md) {
      padding: $spacer-y ($spacer-x / 2);
    } 
  }
}  

Now your navbar links should look like the following screenshot:

And finally, let's transform the text to upper case, reduce its size a bit, and make it bold. In _navbar.scss, add these highlighted lines:

  .nav-link 
  { 
    padding: $spacer; 
    @include media-breakpoint-up(md) { 
     text-transform: uppercase; 
     font-size: 82%; 
     font-weight: bold; &...