Sidebar using Flexbox: contained links not spreading out properly - html

Question

I´m trying to make a side navigation bar using flexbox. The sidebar looks good, but I want the contained links to be spread out and take over the entire left of the screen. I try to do this using padding, but it ends up leaving a white space at the end. Any ideas?
body {
margin: auto 0;
}
#navbar {
display: flex;
flex-direction: column;
border: solid;
background: grey;
height: 900px;
width: 200px;
text-align: center;
}
.nav-link {
text-decoration: none;
border: solid;
padding: 80px;
}
<nav id="navbar">
<header>"A dissertation on fast food"</header>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
</nav>

Answer 1

Since you're using a flex container, instead of using padding for spacing, take advantage of flex features. The flex-grow property can distribute free space in the container evenly across all items.
body {
margin: auto 0;
}
#navbar {
display: flex;
flex-direction: column;
border: solid;
background: grey;
height: 900px;
width: 200px;
text-align: center;
}
.nav-link {
text-decoration: none;
border: solid;
/* padding: 80px; */
flex-grow: 1; /* equal distribution of free space */
/* for centering the text */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
<nav id="navbar">
<header>"A dissertation on fast food"</header>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
</nav>

Answer 2

You are having an overflow. You defined the height to be 900px and for each box you have 160px of padding-top/bottom so 800px of padding and if we consider the border plus the content plus the header we will have more than 900px.
Instead of padding you can use flex:1 to stretch the elements then rely on flexbox inside them to center the text:
body {
margin: auto 0;
}
#navbar {
display: flex;
flex-direction: column;
border: solid;
background: grey;
height: 900px;
width: 200px;
text-align: center;
}
.nav-link {
text-decoration: none;
border: solid;
flex:1;
/*to center the text*/
display:flex;
align-items:center;
justify-content:center;
}
<nav id="navbar">
<header>"A dissertation on fast food"</header>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
</nav>