How to stretch to fill its container space? - html

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