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

Question

我正在 freecodecamp 的产品着陆页项目上工作，我很难理解我的 flexbox 导航栏有什么地方做错了。

随着视口宽度缩小到 1200 像素以下，我的导航 link 开始从右侧消失。

如何保持 padding-right: 5px;随着视口更改大小，最右侧导航项的值？

这是我的 HTML 和 CSS，还有代码笔 link 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;

它会起作用。

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

Why are my nav links disappearing as the viewport shrinks?

html

css

flexbox