margin: 0 auto not working

Question

What exactly is needed for margin: 0 auto to work? It usually works for me but for some reason in this particular case I can't center my navigation menu. Fiddle attached below.

.item-list {
  display: flex;
  margin: 0 auto;
}

.item {
  margin-left: 10px;
  list-style: none;
}

.item a {
  color: #37302b;
  font-size: 20px;
}

header {
  position: inherit;
  height: 50px;
}

<header>
  <nav class="desktop-nav">
    <ul class="item-list">
      <li class="item active">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Home</a>
      </li>
      <li class="item">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Newest</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Most Popular</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Categories</a>
      </li>
      <li class="item">
        <a href="#blog" data-scroll>Stash</a>
      </li>
      <li class="item">
        <a href="#">Contact</a>
      </li>
      <li class="item" onclick="showSearch();">
        <a href="#">Search</a>
      </li>
    </ul>
  </nav>
</header>

https://jsfiddle.net/wwf1at2n/1/

j08691 · Accepted Answer · 2018-04-10T19:51:10.130

Since you're using flexbox, you can add justify-content: center to your .item-list rules (no margin: auto needed):

.item-list {
  display: flex;
  justify-content: center;
}

.item {
  margin-left: 10px;
  list-style: none;
}

.item a {
  color: #37302b;
  font-size: 20px;
}

header {
  position: inherit;
  height: 50px;
}

<header>
  <nav class="desktop-nav">
    <ul class="item-list">
      <li class="item active">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Home</a>
      </li>
      <li class="item">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Newest</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Most Popular</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Categories</a>
      </li>
      <li class="item">
        <a href="#blog" data-scroll>Stash</a>
      </li>
      <li class="item">
        <a href="#">Contact</a>
      </li>
      <li class="item" onclick="showSearch();">
        <a href="#">Search</a>
      </li>
    </ul>
  </nav>
</header>

Awesome, thanks! It works. :-) Did not know about that. – Emily Apr 10 '18 at 19:46 — Emily, Apr 10 '18 at 19:46
margin: 0 auto isn't a hack lol – StefanBob Apr 10 '18 at 19:48 — StefanBob, Apr 10 '18 at 19:48
@StefanBob fair enough; removed – j08691 Apr 10 '18 at 19:51 — j08691, Apr 10 '18 at 19:51

score 1 · Answer 2 · answered Apr 10 '18 at 19:44

1

add justify-content: center; because you're using display: flex

answered Apr 10 '18 at 19:44

Adam

1,385
1
10
23

StefanBob · Answer 3 · 2018-04-10T20:05:08.030

-1

Block level element is needed for margin: 0 auto; to work in a normal scenario.

edited Apr 10 '18 at 20:05

answered Apr 10 '18 at 19:49

StefanBob

4,857
2
32
38

a width is need for margin auto to work because the defautl width is 100% and margin:auto will have no effect – Temani Afif Apr 10 '18 at 19:55
You need a block level element for margin: 0 auto to take effect. It still works on width: 100% elements, there is just nothing to do. – StefanBob Apr 10 '18 at 20:04

margin: 0 auto not working

3 Answers3