Using FlexBox for my own project - am I targeting correctly?

I am trying to use FlexBox on my own website project (my resume site), beginning with the navigation.

My HTML:

  <nav class="navigation">
    <ul>
      <li><a href="index.html" id="current" title="Welcome">Welcome</a></li>
      <li><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
      <li><a href="resume.html" title="Resume">Resume</a></li>
      <li><a href="contact.html" title="Contact">Contact</a></li>
    </ul>
  </nav>

My CSS:

nav ul {
    display: flex;
    justify-content: center;
}

nav ul li {
    justify-content: center;
}

Applying the flex property seems to do nothing. I know that my CSS file is appropriately linked, as I've applied many other styles on the page that are working. I originally built the page using Bootstrap columns (see rebeccajensen.online), but am trying to use FlexBox instead. My thinking is that it's a lighterweight solution for layout positioning than linking to a huge Bootstrap file, of which I only use a tiny slice of its features.

Anyhoo- any insight as to why my FlexBox properties are not working? Am I targeting the wrong things?