Is it possible to remove this while line?

[atakanyaln]

I’m using :hover to add more flavor to my project yet I’m lost as to how I might be able to remove this small white line at the top. I have tried adding padding to the top to increase my hover area yet this does not work. I suspect something with the border area but I have no clue.

My styles.css so far:(Problem I’m having is at #navbar li:hover)

html {
scroll-behavior: smooth;
font-size: 1.2rem;
line-height: 1.5;
font-family: Palatino
}

#navbar {
position: fixed;
border-style: outset;
width: 300px;
height: 100%;
top: 0px;
left: 0px;
border-bottom: 0px;
border-left: 0px;
border-top: 0px;

}

#navbar header {
font-size: 2rem;
padding-left: 5px;

}

#navbar li {
margin-left: -40;
list-style-type: none;
border-style: groove;
border-left: 0px;
padding-left: 5px;
border-right: 0px;
border-bottom: 0px;
padding-bottom: 1.5rem;
}

#navbar li a {
color: black;
text-decoration: none;

}

#navbar li:hover{
background-color: grey;
cursor:pointer;
}

.nav-link {
font-size: 1.5rem;
}

#main-doc {
display: absolute;
margin-left: 310px;
padding: 25px 50px;
}

#main-doc header {
font-weight: bold;
font-size: 1.7rem;
}

code {
display: block;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color: #f7f7f7;
padding: 15px;
margin: 10px;
border-radius: 5px;
}

[hbar1st]

for this type of question, it is best to share the live code link (such as on codepen).

You should try to use the browser’s developer tools to investigate where the white line is coming from also.

[atakanyaln]

@hbar1st

codepen

Yep it was about border. Thanks for mentioning the site btw never heard of it but I tried it and it looks cool.

[carlosvisator]

Hi @atakanyaln

Another, I think helpful for everyone, tip:

you can select all your code and then hit the top button </> and that will format it.

Easier to read.

Anyway, happy coding!!