I am trying to figure out how to extend the border-bottom of this element so it matches the mockup, but I can't seem to do it. It only really goes under the text part.
How can I make it so that it extends to the entire box/underlines half of the nav bar?
Here's what it's supposed to look like:(https://i.stack.imgur.com/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 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; }}And here's what I'm getting:(https://i.stack.imgur.com/bf1vQ.png)
I also tried to put the in a div and do the border on that, but it gave me the same result.Thanks in advance.