How can I have perfectly centered navigation bar with equally wide links?

Question

So I want to have a centered navigation menu/bar on my website, kind of like the one on Ovh\'s website. What CSS do I put (don\'t include colors). Here is my HTML:

Answer 1

Firstly, your HTML is invalid, ul can only have li as direct children...but we can use a nav element instead.

Method 1: Table Layout

.center-links {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}
.center-links a {
  display: table-cell;
  border: 1px solid grey;
}

<div class="container">
  <nav class="center-links">
    <a href="" class="content">Home</a>
    <a href="/about" class="content">About</a>
    <a href="/projects" class="content">Projects</a>
    <a href="/recruit" class="content">recruting</a>
    <a href="/help" class="content">Help</a>
  </nav>
</div>

Method 2: Flexbox

.center-links {
  display: flex;
  text-align: center;
}
.center-links a {
  flex: 1;
  border: 1px solid grey;
}

<div class="container">
  <nav class="center-links">
    <a href="" class="content">Home</a>
    <a href="/about" class="content">About</a>
    <a href="/projects" class="content">Projects</a>
    <a href="/recruit" class="content">recruting</a>
    <a href="/help" class="content">Help</a>
  </nav>
</div>