I am having trouble positioning my list element in my nav element

The justify-content property is irrelevant here - it only applies to elements in a Flex or Grid layout.

The issue here is the default margin/padding on the <ul> and <li> elements.

You might also want to set the line-height on the <nav> so that the list items are more centred.

nav {
  height: 50px;
  width: 400px;
  background-color: red;
  line-height: 48px;
}

nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
  margin: 10px;
  font-size: 20px;
}

<nav>
  <ul style="list-style: none">
    <li>#stayhome</li>
    <li>anime</li>
    <li>queue</li>
    <li>discord</li>
  </ul>
</nav>

You can achieve the same result by setting display property of ul to flex

  nav {
  height: 50px;
  width: 400px;
  background-color: red;
  line-height: 48px;
  }
  ul{
  margin: 0;
  padding: 0;
  display:flex;
  justify-content: space-around;
} 

<nav>
   <ul style="list-style: none">
     <li>#stayhome</li>
     <li>anime</li>
     <li>queue</li>
     <li>discord</li>
    </ul>
 </nav>