I'm struggling to extend the border-bottom of this element to match the mockup. It currently only goes under the text part.
How can I make it so that it extends to cover the entire box or underline half of the nav bar?
This is what it should look like: (https://i.sstatic.net/fLeaH.png)
Here's the HTML:
<nav class="nav">
<ul class="nav__list">
<li class="nav__item nav__logo"><img src="./assets/logo/Logo-bandsite.svg"></li>
<li class="nav__item nav__links">
<a class="nav__link nav__link--bio" href="./index.html">Biography</a>
<a class="nav__link nav__link--shows" href="">Shows</a>
</li>
</ul>
</nav>
And here's the SCSS:
.nav {
&__list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 5rem;
padding-top: 1.3rem;
}
&__logo {
padding-bottom: 1.2rem;
}
&__links {
width: 100%;
display: flex;
justify-content: space-around;
}
&__link--bio {
font-weight: $bold;
box-sizing: border-box;
padding-bottom: 1rem;
border-bottom: 3px solid $primary-white;
border-width: 100%;
display: block;
}
}
Currently, this is the result I'm getting: (https://i.sstatic.net/bf1vQ.png)
I also attempted putting the <a> in a div and applying the border there, but it yielded the same outcome. Thank you in advance.