Im working on the product landing page project from freecodecamp, and I'm struggling to understand what I'm not doing right with my flexbox nav bar.

My nav links start to disappear off the right side as the viewport width shrinks below 1200px.

What can I do to maintain padding-right: 5px; value on the right hand most nav item as the viewport changes size?

here is my HTML and CSS, as well as the codepen 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;
}

CodePudding user response：

Take away your line 70 :

70:  width: 95vw;

And it will works.