How to stretch to fill its container space?

Question

In navbar are 3 links which have wrapper div element, problem is cus that links inside of div are not stretched. Check the screenshot - I need to hit link to navigate between pages:

I want to that links in nav to stretch space like with and heigh 100%;

This is css of navbar

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  color: var(--color-white);
  background-color: var(--color-black);

  .user-nav {
    display: flex;
    align-items: center;

    &-item {
      width: 118px;
      font-size: 20px;
      font-weight: 500;
      line-height: 30px;
      text-align: center;
      color: var(--color-grey);
    }

    &-item-active {
      width: 118px;
      font-size: 20px;
      font-weight: 500;
      line-height: 30px;
      text-align: center;
      color: var(--color-grey);
      box-shadow: inset 0 -4px 0 var(--color-red); // made border bottom inside of element
    }

    &-item-link {
      text-decoration: none;
      color: inherit;
    }
  }

  .logo {
    width: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    img {
      width: 100%;
    }
  }
}

Html of navbar:

<header className="header">
        <nav className="user-nav">
          <div className={this.handleActiveRoute('/', activeRoute)}>
            <Link href="/">
              <a className="user-nav-item-link">Dashboard</a>
            </Link>
          </div>
          <div className={this.handleActiveRoute('/search', activeRoute)}>
            <Link href="/search">
              <a className="user-nav-item-link">Search</a>
            </Link>
          </div>
          <div className={this.handleActiveRoute('/collections', activeRoute)}>
            <Link href="/collections">
              <a className="user-nav-item-link">Collections</a>
            </Link>
          </div>
        </nav>
        <div className="logo">
          <img src={Logo} alt="logo" />
        </div>
        <div className="user-nav-icon">
          <div className="user-nav-icon-notification">
            <span className="icon-bell-o" />
          </div>
          <div className="user-nav-icon-settings">
            <span className="icon-cog" />
          </div>
        </div>
      </header>

How to make a links inside of divs to have 100% width and height?

Answer 1

'display: block' on links probably helps