gap borders' right and left - css

Question

When I applied padding to 'a' elements, there will be gaps top-borders' left and right.I want the top border covers entire line until navbar's right border. How can I solve this problem.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 6fr;
}
.navbar {
border-right: gray 3px solid;
padding: 5%;
position: sticky;
top: 0;
height: 100vh;
box-sizing: border-box;
min-width: 300px;
}
#navbar-header {
text-align: center;
margin-bottom: 20px;
}
#navbar-content a {
text-decoration: none;
color: black;
}
#navbar-content a li {
list-style: none;
padding: 5%;
padding-left: 10%;
border-top: gray 1px solid;
}
<div class="wrapper">
<div class="navbar">
<h2 id="navbar-header">JS Documentation</h2>
<ul id="navbar-content">
<a href="#intro">
<li>Introduction</li>
</a>
<a href="#know">
<li>What you should already know</li>
</a>
<a href="#js-java">
<li>JavaScript and Java</li>
</a>
<a href="#hello">
<li>Hello World</li>
</a>
<a href="#var">
<li>Variables</li>
</a>
<a href="#dec-var">
<li>Declaring Variables</li>
</a>
<a href="#var-sco">
<li>Variable Scope</li>
</a>
<a href="#glo-var">
<li>Global Variables</li>
</a>
<a href="#cons">
<li>Constants</li>
</a>
<a href="#data">
<li>Data Types</li>
</a>
<a href="#if-else">
<li>if...else statement</li>
</a>
<a href="#while">
<li>while statement</li>
</a>
<a href="#func">
<li>Function declarations</li>
</a>
<a href="#ref">
<li>Reference</li>
</a>
</ul>
</div>
<div class="contents">
</div>
</div>
When I applied padding to 'a' elements, there will be gaps top-borders' left and right.I want the top border covers entire line until navbar's right border. How can I solve this problem.

Answer 1

Remove the padding-left/right from the navbar and increase the one of the li:
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 6fr;
}
.navbar {
border-right: gray 3px solid;
padding: 5% 0; /*updated*/
position: sticky;
top: 0;
height: 100vh;
box-sizing: border-box;
min-width: 300px;
}
#navbar-header {
text-align: center;
margin-bottom: 20px;
}
#navbar-content a {
text-decoration: none;
color: black;
}
#navbar-content a li {
list-style: none;
padding: 5% 10%; /*updated*/
border-top: gray 1px solid;
}
<div class="wrapper">
<div class="navbar">
<h2 id="navbar-header">JS Documentation</h2>
<ul id="navbar-content">
<a href="#intro">
<li>Introduction</li>
</a>
<a href="#know">
<li>What you should already know</li>
</a>
<a href="#js-java">
<li>JavaScript and Java</li>
</a>
<a href="#hello">
<li>Hello World</li>
</a>
<a href="#var">
<li>Variables</li>
</a>
<a href="#dec-var">
<li>Declaring Variables</li>
</a>
<a href="#var-sco">
<li>Variable Scope</li>
</a>
<a href="#glo-var">
<li>Global Variables</li>
</a>
<a href="#cons">
<li>Constants</li>
</a>
<a href="#data">
<li>Data Types</li>
</a>
<a href="#if-else">
<li>if...else statement</li>
</a>
<a href="#while">
<li>while statement</li>
</a>
<a href="#func">
<li>Function declarations</li>
</a>
<a href="#ref">
<li>Reference</li>
</a>
</ul>
</div>
<div class="contents">
</div>
</div>