为什么我的导航链接会随着视口缩小而消失

Question

我正在freecodecamp的产品登录页项目中工作，我很难理解我的flexbox导航栏做得不对。

当视口宽度缩小到1200px以下时，我的导航链接开始从右侧消失。

我能做些什么来保持填充正确：5px；当视口改变大小时，最右侧导航项上的值？

这是我的HTML和CSS，以及代码笔链接https://codepen.io/lforsey/pen/NWwGZzV

<div id='page-wrapper'>
<header id='header'>
<div class='cat-logo'>
<img id='header-img' src='https://free-images.com/or/7b03/logo_hoffmanns_staerkefabriken_svg.svg' id='cat-logo' alt='cat-svg-logo'></img>
</div>
<nav id='nav-bar'>
<ul>
<li><a class='nav-link' href='#features' id='nav-link'>Features</a></li>
<li><a class='nav-link' href='#how-it-works' id='nav-link'>How It Works</a></li>
<li><a class='nav-link' href='#pricing' id='nav-link'>Pricing</a></li>
</ul>
</nav>
</header>
<div class='container'></div>
</div>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
}
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #eee;
}
/*header {
display: flex;
flex: 0 0 auto;
top: 0;
left: 0;
right: 0;
}*/
.logo {
width: 60vw;
}
@media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.cat-logo > img {
width: 100%;
height: 100%;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.nav-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
font-family: cursive;
list-style: none;
padding: 1vw;
}
nav > ul {
width: 95vw;
display: flex;
content-align: center;
flex-direction: row;
justify-content: flex-end;
padding-right: 20px;
}

Answer 1

拿走你的第70行：

70:  width: 95vw;

它会起作用的。