How to space out list items

Question

I am unable to get my nav to sit the way I like, the header is fine but ul just won't sit right.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  list-style: none;
  position: relative;
}

<div class="nav">
  <h2>hackeryou</h2>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Bootcamp</li>
      <li>Part-Time</li>
    </ul>
  </nav>
</div>

I expect the h2 to stay left but I want everything else to move be more spaced out on the right.

What exactly you're looking for? How you want the the nav to appear? — Gopi, Feb 13 '19 at 00:54
there are many ways to accomplish this, with padding, flex properties, margins, :before, :after, etc etc. see: https://stackoverflow.com/questions/15710701/horizontal-list-items — soulshined, Feb 13 '19 at 00:55
Possible duplicate of [Horizontal list items](https://stackoverflow.com/questions/15710701/horizontal-list-items) — soulshined, Feb 13 '19 at 00:55

score 1 · Answer 1 · answered Feb 13 '19 at 01:06

You don't really need justify-content: space-between for nav ul as the whole nav is already shifted to the right. Just add a margin as required to nav ul li - see demo below:

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  list-style: none;
  position: relative;
  margin: 10px; /* ADJUST THIS */
}

<div class="nav">
  <h2>hackeryou</h2>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Bootcamp</li>
      <li>Part-Time</li>
    </ul>
  </nav>
</div>

How to space out list items

1 Answers1