Nav menu will not center

Question

My nav menu will not center. And I can't find the fault in the code. Maybe someone can help me?!

#nav-header {
    height: 60px;
    width: auto;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: 80px;
}

#nav-header li.nav-link {
    display: inline;
    padding: 20px 20px 20px 20px;
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif;
    font-size: 28pt;
    text-align: inherit;
    margin: 0 auto;

    
}

 <ul id="nav-header">
    <li class="nav-link"><a href="index.html">Home</a></li>
    <li class="nav-link"><a href="#">Game</a></li>
    <li class="nav-link"><a href="#">Higschore</a></li>
    <li class="nav-link"><a href="#">Contact</a></li>
</ul>

Kind regards,

Jelmer

Sorry, I copied the wrong text-align. text-align: center; still doesn't work. — jelmerdt, Feb 11 '15 at 16:44
Possible duplicate of http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div — Kai Mattern, Feb 11 '15 at 16:50

score 3 · Accepted Answer · answered Feb 11 '15 at 16:44

Add text-align:center; to the parent element.

#nav-header {
    height: 60px;
    width: auto;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: 80px;
    text-align:center; /* see here */
}

#nav-header li.nav-link {
    display: inline-block; /* preferable to plain inline */
    padding: 20px 20px 20px 20px;
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif;
    font-size: 28pt;
    text-align: inherit;
    margin: 0 auto;

    
}

 <ul id="nav-header">
    <li class="nav-link"><a href="index.html">Home</a></li>
    <li class="nav-link"><a href="#">Game</a></li>
    <li class="nav-link"><a href="#">Higschore</a></li>
    <li class="nav-link"><a href="#">Contact</a></li>
</ul>

score 2 · Answer 2 · answered Feb 11 '15 at 16:44

Add text-align: center to #nav-header:

#nav-header {
    height: 60px;
    width: auto;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: 80px;
    text-align: center;
}

#nav-header li.nav-link {
    display: inline;
    padding: 20px 20px 20px 20px;
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif;
    font-size: 28pt;
    text-align: inherit;
    margin: 0 auto;

    
}

<ul id="nav-header">
    <li class="nav-link"><a href="index.html">Home</a></li>
    <li class="nav-link"><a href="#">Game</a></li>
    <li class="nav-link"><a href="#">Higschore</a></li>
    <li class="nav-link"><a href="#">Contact</a></li>
</ul>

score 1 · Answer 3 · answered Feb 11 '15 at 16:44

First at all you will need to reset the default padding of the ul, then since you are using inline for the li elements you can use text-align property on the container to center the elements inside:

#nav-header {
   padding:0;
   text-align:center;
}

#nav-header {
  height: 60px;
  width: auto;
  background-color: rgba(255, 255, 255, 0.7);
  margin-top: 80px;
  padding:0;
  text-align:center;
}
#nav-header li.nav-link {
  display: inline;
  padding: 20px 20px 20px 20px;
  font-family: 'Source Sans Pro', sans-serif, "Open Sans", "Helvetica", sans-serif;
  font-size: 28pt;
  text-align: inherit;
  margin: 0 auto;
}

<ul id="nav-header">
    <li class="nav-link"><a href="index.html">Home</a></li>
    <li class="nav-link"><a href="#">Game</a></li>
    <li class="nav-link"><a href="#">Higschore</a></li>
    <li class="nav-link"><a href="#">Contact</a></li>
</ul>

Nav menu will not center

3 Answers3