Now on my second month of learning HTML & CSS, I'm practicing designing and styling website headers. However, I've encountered an issue which I'm unsure how to resolve.
I've created an anchor tag which creates a border-bottom when hovered over, however in doing so it appears to add padding-bottom to the div in which it's contained.
I will attach both the HTML and CSS below. Any help would be greatly appreciated; I'm sure it's a small fix, but it's one I don't know yet! Thanks in advance.
* {
margin: 0;
}
.header-top {
display: flex;
align-items: center;
position: sticky;
top: 0;
background-color: rgb(32, 32, 32);
padding: 20px 30px;
justify-content: center;
}
.header-top-logo {
font-family: 'Dancing Script', cursive;
color: white;
font-size: 50px;
text-align: center;
}
.header-top-2 {
display: flex;
align-items: center;
position: sticky;
top: 0;
background-color: rgb(32, 32, 32);
padding-bottom: 40px;
justify-content: center;
}
.header-top-logo-2 {
font-family: 'Dancing Script', cursive;
color: white;
font-size: 30px;
text-align: center;
}
.header-main {
display: flex;
align-items: center;
position: sticky;
top: 0;
background-color: rgb(32, 32, 32);
justify-content: center;
padding-bottom: 50px;
}
.header-main a {
font-family: 'Roboto Slab', serif;
color: white;
text-decoration: none;
}
.header-main a:hover {
border-bottom: 2px solid white;
}<div class="header-top">
<span class="header-top-logo">Busby & Kane</span>
</div>
<div class="header-top-2">
<span class="header-top-logo-2">Independent Funeral Directors</span>
</div>
<div class="header-main">
<a href="/">Home</a>
</div>
