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

I am having troubles making my list go to the left of my nav element. I have tried to make the nav element relative and list absolute, but that just makes the words overlap each other.

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

li {
  display: inline;
  justify-content: space-evenly;
  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>

CodePudding user response：

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>

CodePudding user response：

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>