How to remove unwanted whitespaces - html

Question

I am practicing html/css by making this website but there are some white spaces to the left and right around the links in list of contents. I have added a sample of html code of how complete list is coded.
I have tried setting the margins and paddings of all elements to zero but nothing is working.
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 20% 80%;
margin: 0;
}
.nav_bar {
min-height: 100vh;
overflow-y: auto;
margin: 0;
padding: 0;
}
.nav_bar ul {
display: block;
padding: 5px;
list-style: none;
font-size: 0;
margin: 0;
}
.nav_bar li {
padding: 10px 5px;
border-bottom: 2px solid black;
}
<div class="container">
<div class="nav_bar">
<h3>JS DOCUMENTATION</h3>
<ul class="nav_list">
<li>
Introduction
</li>
</ul>
</div>
</div>
enter image description here

Answer 1

You have given the padding to the ul tag that is the reason why the line did not touch two extreme ends.
just change the padding in the ul to 0
Is this what you are looking for ?
I added the color in order to show where the problem occured
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 40% 30%;
margin: 0;
padding:0;
}
.nav_bar {
min-height: 100vh;
overflow-y: auto;
margin: 0;
padding: 0;
}
h3 {
padding: 10px 5px;
}
ul {
display: block;
padding: 0px;
font-size: 0;
margin: 0;
}
li {
padding: 10px 5px;
border-bottom: 2px solid black;
}
li:first-child {
border-top: 2px solid black;
}
a {
text-decoration: none;
color: black;
font-size: 18px;
font-weight: 300;
}
<div class="container" style="background-color:green;">
<div class="nav_bar" style="background-color:lightblue;">
<h3 style="background-color:red;">JS DOCUMENTATION</h3>
<ul style="background-color:pink;" class="nav_list">
<li>
Introduction
</li>

Answer 2

Are u expecting like this :
NOTE: CHECK MY ANSWER IN FULL SCREEN MODE
#drop-down{
padding-inline-start:0; /*use this css */
}
HTML:
<ul class="nav_list" id="drop-down"> <!-add id="drop-down" to ul-->
<li>
Introduction
</li>
</ul>
#drop-down {
padding-inline-start: 0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: 20% 80%;
margin: 0;
}
.nav_bar {
min-height: 100vh;
overflow-y: auto;
margin: 0;
padding: 0;
}
.nav_bar h3 {
padding: 10px 5px;
}
.nav_bar ul {
display: block;
padding: 5px;
list-style: none;
font-size: 0;
margin: 0;
}
.nav_bar li {
padding: 10px 5px;
border-bottom: 2px solid black;
}
.nav_bar li:first-child {
border-top: 2px solid black;
}
.nav_list a {
text-decoration: none;
color: black;
font-size: 18px;
font-weight: 300;
}
<div class="container">
<div class="nav_bar">
<h3>JS DOCUMENTATION</h3>
<ul class="nav_list" id="drop-down">
<li>
Introduction
</li>
</ul>
</div>
</div>

Answer 3

Assuming you mean the padding on the list items (which you don't currently confiugre in your css), you can do the following;
.nav_list li {
padding-left: 0;
padding-right: 0;
}
This will remove the padding on the left and right side side for each list item in your unordered list.
Also note that in your question, you have not yet set all paddings to 0.
.nav_bar ul {
display: block;
padding: 5px;
list-style: none;
font-size: 0;
margin: 0;
}
If this is not desired behaviour, be sure to set the padding of the unordered list to 0 too.