Justify Content CSS property isn't working on classes

I'm learning frontend web development and designing my own portfolio. I've stumbled across an issue regarding justify-content and align-item CSS properties. They don't seem to work on my classes.

Protfolio Demo with current CSS & HTML

Here is the relevant code:

* {
  box-sizing: border-box;
  margin: 0%;
  padding: 0%;
}

body {
  font-family: roboto;
  background-repeat: space;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

nav {
  display: flex;
  height: 20vh;
}

.space1 {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 50%;
  background-color: lawngreen;
}

.nav-logo {
  display: flex;
  background-color: red;
  width: 50%;
  height: 100%;
}

.empty-space1 {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.space2 {
  display: flex;
  width: 50%;
  background-color: lightyellow;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.empty-space2 {
  display: flex;
  width: 50%;
  background-color: yellow;
  height: 100%;
}

.nav-links {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.nav-links ul {
  display: inline-flex;
  list-style: none;
  height: 100%;
}

.nav-links ul li a {
  justify-content: space-evenly;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
  <div class="space1">
    <div class="nav-logo">Logo</div>
    <div class="empty-space1">lorem
      <!--empty space-->
    </div>
  </div>
  <div class="space2">
    <div class="empty-space2">lorem
      <!--empty space-->
    </div>
    <div class="nav-links">lorem
      <ul>
        <li><a href="">About Me</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Projects</a></li>
        <li><a href="">Tools</a></li>
      </ul>
    </div>
  </div>
</nav>

Would you please tell me why is this not working and How can I solve the issue?

Thank you :)

Solution

In order to align to the center using align-items and justify-content, you need to apply it to the direct container of your content.

Also, your ul element had a height: 100% even though there where more text before it. so I removed that so it won't overflow the container.

/* ADDITION */

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


/* END */

* {
  box-sizing: border-box;
  margin: 0%;
  padding: 0%;
}

body {
  font-family: roboto;
  background-repeat: space;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

nav {
  display: flex;
  height: 150px;
}

.space1 {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 50%;
  background-color: lawngreen;
}

.nav-logo {
  display: flex;
  background-color: red;
  width: 50%;
  height: 100%;
}

.empty-space1 {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.space2 {
  display: flex;
  width: 50%;
  background-color: lightyellow;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.empty-space2 {
  display: flex;
  width: 50%;
  background-color: yellow;
  height: 100%;
}

.nav-links {
  display: flex;
  width: 50%;
  background-color: tomato;
  height: 100%;
}

.nav-links ul {
  display: inline-flex;
  list-style: none;
  /* REMOVED! */
  /* height: 100%; */
  justify-content: space-evenly;
}

.nav-links ul a {
  margin: 0 .1em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
  <div class="space1">
    <div class="centered-content nav-logo">Logo</div>
    <div class="centered-content empty-space1">lorem
      <!--empty space-->
    </div>
  </div>
  <div class="space2">
    <div class="centered-content empty-space2">lorem
      <!--empty space-->
    </div>
    <div class="centered-content nav-links">lorem
      <ul class="centered-content">
        <li><a href="">About Me</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Projects</a></li>
        <li><a href="">Tools</a></li>
      </ul>
    </div>
  </div>
</nav>

Notice that I moved the justify-content: space-evenly; from .nav-links ul li a to .nav-links ul li, which is our content's container. So we want to justify its content to space evenly.

For safety (to make sure they don't touch even on small screens), you can add a margin between each element to separate them as well:

.nav-links ul a {
  margin: 0 .1em;
}