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

Question

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>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Jan 18 '22 at 11:02
Useful reading: [CSS reset - What exactly does it do?](https://stackoverflow.com/a/11579120/1115360) — Andrew Morton, Jan 18 '22 at 11:04

score 1 · Answer 1 · answered Jan 18 '22 at 13:40

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>

score 0 · Accepted Answer · answered Jan 18 '22 at 11:04

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>

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

2 Answers2