CODEWITHSUNDEEP
htmlcssflexboxnavigationbar
user9700458
user9700458

Reputation: 21

How to space out list items

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.

Upvotes: 2

Views: 70

Answers (1)

kukkuz
kukkuz

Reputation: 42360

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>

Upvotes: 1

Related Questions