How can I keep those three words of this anchor element in the same line?

I am having trouble trying to keep the three words in "how it works" in the same line, I tried adding a width of 100% but still not working, and I am not sure if it is because of the type of display.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://kit.fontawesome.com/d76d298982.js"
      crossorigin="anonymous"
    ></script>
    <title>Document</title>
  </head>
  <body>
    <header id="header">
      <div class="logo-guitar">
        <img
          src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4967c986-ec95-478c-9e95-c46800f3435e/ddd2cgg-233c6068-7609-42b9-b094-d0b8289d96c5.png/v1/fill/w_1280,h_1280,strp/commission__guitar_logo_by_comacrow_ddd2cgg-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTI4MCIsInBhdGgiOiJcL2ZcLzQ5NjdjOTg2LWVjOTUtNDc4Yy05ZTk1LWM0NjgwMGYzNDM1ZVwvZGRkMmNnZy0yMzNjNjA2OC03NjA5LTQyYjktYjA5NC1kMGI4Mjg5ZDk2YzUucG5nIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.16vyN8nXmj6DHlloCriB0cMIuNssn0FwnyQayiDDSsg"
          alt="Store Logo"
          id="header-img"
          width="100px"
        />
      </div>
      <div class="luthier-name">
        <h1>Le Luthier Omar Forero</h1>
      </div>
      <div class="nav-bar-div">
        <nav id="nav-bar">
          <a href="#features" class="nav-link">Features</a>
          <a href="how-it-works" class="nav-link">How It Works</a>
          <a href="" class="nav-link">Pricing</a>
        </nav>
      </div>
    </header>
  </body>
</html>

and css

body {
  background-color: #eff1ed;
}

/* Header and nav bar */
header {
  display: flex;
}
.logo-guitar {
  padding: 3%;
}
.luthier-name {
  width: 100%;
  padding-top: 3.5%;
}
#nav-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.nav-link {
  width: 100%;
}

I am also not sure if a have to use flex or grid for this one.

Solution

body {
    background-color: #eff1ed;
}

/* Header and nav bar */
header {
    display: flex;
}
.logo-guitar {
    padding: 3%;
}
.luthier-name {
    width: 100%;
    padding-top: 3.5%;
}
#nav-bar {
    display: flex; text-align: center; /* Change Here */
    justify-content: space-between; text-align: center; /* Change Here */
    flex-direction: row; text-align: center; /* Change Here */
}
.nav-link {
    width: 90px; text-align: center; /* Change Here */
    margin: 2px auto; text-align: center; /* Change Here */
    text-align: center; /* Change Here */ 
    
}