How do I space out the links equally in a nav bar?

Question

Hi im new to html and css and I am unable to space out the links in a nav bar.

This is what i am trying to get: image

This is what I have so far:

.topnav {
  overflow: hidden;
  background-color: white;
  border: 5px solid black;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}

<h1>ABOUT ME</h1>
<div class="topnav">
  <nav>
    <ul>
      <a href="aboutme.html">About Me</a>
      <a href="mypast.html">My Past</a>
      <a href="mypresent.html">My Present</a>
      <a href="myfuture.html">My Future</a>
      <a href="feedback.html">Feedback</a>

    </ul>
  </nav>
</div>

Answer 1

.topnav a {
    display: inline-block;
    color: black;
    background-color: rgb(233, 233, 233);
    text-align: center;
    padding: 5px;
    text-decoration: none;
    font-size: 17px;
    flex: 1;
    border: 3px solid black;
}

ul{
    display: flex;
    justify-content: center;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 5px solid black;
    border-bottom: 5px solid black;
    padding: 0;
    background-color: black;
}