Aligning Items in Navigation Bar

HTML-CSS
1

I’m having trouble aligning links in my nav bar. Specifically, I want to move my links to the right of the page, and I want to have more space between links.

My nav bar is wrapped in a element, and so far I’ve tried applying “display:flex” and “justify-content: right”, but the items are not moving. Any help would be much appreciated!

<style>
header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: right;
  align-items: center;
  background-color: #ee;
  @media (max-width: 600px) {
    flex-wrap: wrap;
  }
}

ul {
  padding: 0;
  list-style: none;
}

.nav {
  list-style: none;
  text-align: right;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  fustify-content: space-between;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  display: inline-block;
  margin-right: -4px;
}

</style>

<div id="main">
  <header id="header">
      <div class="logo">
    <img id="header-img" src="https://i.imgur.com/uIXFckZ.png" alt="upvote logo" </img>
  </div>
<div class="nav">
  <ul role="navigation">
    <li> Features </li>
    <li> How It Works </li>
    <li> Pricing </li>
    
  </ul>
  </div>
  </header>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-pagePreformatted text

2

Firstly, position should be relative.
Instead of using justify-content:right, float: right will do
For space between links, margin-left:10px

<style>
header {
  position: relative;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  align-items: center;
  background-color: #ee;
  display: flex;
  float: right;
  @media (max-width: 600px) {
    flex-wrap: wrap;

  }

}

ul {
  padding: 0;
list-style: none;

}



.nav  {
list-style: none;
text-align: right;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  fustify-content: space-between;
}
.nav li  {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  display: inline-block;
  margin-left: 10px;



}

</style>

<div id="main">
  <header id="header">
      <div class="logo">
    <img id="header-img"  src="https://i.imgur.com/uIXFckZ.png" alt="upvote logo" </img>
  </div>
<div class="nav">
  <ul role="navigation">
    <li > Features </li>
    <li > How It Works </li>
    <li > Pricing </li>

  </ul>
  </div>
  </header>
</div>
3

I was reading here https://learn.freecodecamp.org/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property and there is no “justify-content: right;”, I mean “right” is not an option for that property. Then, in .nav there is a mistake, it says “fustify-content”.
Maybe if you just use “text-align: right;” in .nav and delete the flex stuff, the links would align to the right. Also @kiowd suggestion about float is a good option.