Html – How do I align buttons horizontally?

:root {
  /* defining a custom CSS property, with the name of
     --common-color, and with its value set to white;
     the reason for this comes later in the code. It's
     defined here on the :root element in order to allow
     its use throughout the document: */
  --common-color: white;
  /* I like to use meaningful names, but obviously define
     your own property-naming preferences, but do be
     consistent: */
  --common-hover-background-color: aquamarine;
  --common-transition-duration: 600ms;
  --common-transition-timing-function: linear;
}

*,
 ::before,
 ::after {
  /* used to minimise cross-browser defaults and variation,
     this causes the browser to size all elements according
     to the border-box algorithm, which takes an assigned
     size and includes border-widths and padding into
     that assigned size: */
  box-sizing: border-box;
  /* I  moved these properties here, in order to set all margins and
     padding across the document to zero; also, if the supplied
     length/size is 0 (zero), no units are required: */
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: Arial, Helvetica, sans-serif;
}

.page-header,
.header-title {
  align-items: center;
  background-color: black;
  /* given that you want the <nav>, and <header> contents, to have the same colour
      text I'd suggest that you use a CSS custom property in order to allow easier
     maintenance in future, so here we're taking advantage of the defined
     --common-color CSS property (defined above, in the :root element), and using
     it via the CSS var() function: */
  color: var(--common-color);
  justify-content: center;
  text-align: center;
  margin: 0;
  /* here you're supplying padding for the various sides of the element:
       padding: 2px 5px 2px 5px;
     which could be abbreviated to:
       padding: 2px 5px;
     specifying the top/bottom (2px) and left/right (5px) padding, but
     currently there's the option of using CSS logical properties,
     which specifies the padding for padding-block-start, padding-block-end,
     padding-inline-start, and padding-inline-end:
       padding-block-start: 2px;
       padding-block-end: 2px;
       padding-inline-start: 5px;
       padding-inline-end: 5px;
     or abbreviated to:
       padding-block: 2px 2px;
       padding-inline: 5px 5px;
     or, if both values (-start, -end respectively) are the same: */
  padding-block: 2px;
  padding-inline: 5px;
}

h1 {
  /* because of the reset of the margin and padding properties to
     zero, we need to explicitly set the padding on the <h1> to
     provide some space: */
  padding-block: 0.5rem;
}

.nav-bar {
  background-color: lightblue;
  /* the nav element doesn't have an automatic border, so the following
     rule is unnecessary, and therefore commented out:
       border: none;
   */
  margin: 0;
  /* while this is one means of hiding content you don't wish to display,
     there are better possibilities, in this demo I'm going to use the
     clip-path property to hide and reveal the drop-down elements within
     the <nav>, so this is unnecessary on this occasion:
    overflow: hidden;
  */
  padding: 0;
  /* setting display: flex which allows the browser to lay items out,
     according to the size of their content: */
  display: flex;
  /* if you'd like a gap between adjacent elements, the gap property
     (shorthand to set both column-gap and row-gap in one statement)
     exists for that purpose: */
  gap: 1rem;
  /* this changes how the contents are laid out, space-between places
     the first and last children at the start and end, with remaining
     space divided equally between the remaining elements: */
  justify-content: space-between;
}


/* navigation bar behavior */


/* you want the contents of the .nav-bar element to be laid out horizontally,
   which is possible within an inline-block element, but there's no benefit
   using inline-block instead of any other value (block, flex, grid, static,
   flow-root...) so I'd commenting that selector out of the following elements
   regardless; but also the remaining elements willy be laid out as flex-items,
   so inline-block is effectively disregarded so this entire selector chain is
   commented out
   
      .nav-home-btn,
      .nav-bar,
      .nav-home-btn,
      .nav-memories-btn,
      .nav-family-btn,
      .nav-about-btn {
        display: inline-block;
      }
*/


/* all of the elements you're selecting here are descendants of the same parent,
   and are all <button> elements; so if you alter your selector to take advantage
   of that, you can reduce the size of your CSS and immediately accommodate
   future matching additions/removals to the <nav>:
      .nav-home-btn,
      .nav-memories-btn,
      .nav-family-btn,
      .nav-about-btn
   */


/* assuming that you want the various elements to take the full available width,
   we can set the flex-grow property to 1,
   and center the text:: */

.nav-bar>* {
  flex-grow: 1;
  text-align: center;
  /* the only reason I've set a transition is to make it easier to visualise the
     gap I set between the adjacent elements in the <nav>; it's irrelevant to
     the demo and can be kept, removed, or adjusted as you desire: */
  transition: background-color var(--common-transition-duration) var(--common-transition-timing-function);
}

.nav-bar button {
  /* I've set the background-color to transparent because a value that you
     wish to set is already set on an ancestor element's background, allowing
     that background to be visible reduces the likelihood of surprises on
     future changes and updates: */
  background-color: transparent;
  border: none;
  color: var(--common-color);
  /* where possible, try not to use hard-coded absolute values (px, pc, pt...),
     this is because they restrict accessibility (there's a link in the
     bibliography, below); instead using relative units such as em, or rem
     1rem is equivalent to the width of an M character set at the root of the
     document (1 root-em), whereas 1em is the size of one M character of the
     inherited font-size, which itself could have been larger or smaller depending
     on its own em-sizing. Basically, 1rem is a consistent size across the document
     whereas 1em can vary depending upon the cascade and inheritance.
     */
  font-size: 1rem;
  /* as above, px sizing isn't great for accessibility; so here I use rems again; 0.9
     derived from (14/16) * 100 = 87.5 (14 is 87.5% of 16), we apply that to 1rem
     which is (approximately) 0.9 and, of course, using CSS logical properties:
  */
  padding-block: 0.9rem;
  padding-inline: 1rem;
  text-align: center;
  text-decoration: none;
  /* where possible, let the browser calculate sizing, and then you get a measure
     of responsiveness in your design for free:/
       width: 255px;
  */
}


/*  here we're styling the child elements of the <nav> that are not <button> elements,
    because the use of position: absolute will position the element out of the
    document flow in relation to its closest ancestor element with a non-static
    position; so we add position: relative to the <div> descendants (as the
    <button> elements contain no drop-down contents):
*/

.nav-bar>*:not(button) {
  isolation: isolate;
  position: relative;
}


/* as above, we're simplifying the selectors: */

.nav-bar>*:hover {
  background-color: var(--common-hover-background-color);
}

.nav-bar a {
  /* please stop using float; it's an outdated solution to a problem that
     was solved with the creation of CSS flex and Grid.
      float: left;
  */
  font-family: inherit;
  font-size: 1rem;
  /* color: white; */
  text-align: center;
  padding: 0.9rem 1rem;
  text-decoration: none;
}


/* link style */


/* I can't think of a good reason to have two seperate rule sets for
   the same elements, and we don't want to use float here anyway; so
   I'm removing the first rule-set:
.nav-memories-dropdown,
.nav-family-dropdown {
  float: left;
  overflow: hidden;
}
*/

.dropdown {
  /*
  display: none;
  */
  inline-size: 100%;
  block-size: 100%;
  clip-path: circle(0 at 50% 0);
  color: black;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: flex;
  justify-content: center;
  transition: clip-path var(--common-transition-duration) var(--common-transition-timing-function);
}

.nav-bar>*:hover .dropdown {
  clip-path: circle(100% at 50% 0);
}

.dropdown a:is(:hover, :active, :focus, :focus-visible) {
  background-color: var(--common-hover-background-color);
  transition: background-color var(--common-transition-duration) var(--common-transition-timing-function);
}

<header class="page-header">
  <div class="header-title">
    <h1 class="h1-title">AJ Adventures</h1>
  </div>
</header>

<nav class="nav-bar">
  <button class="nav-home-btn">Home </button>
  <div class="nav-memories">
    <button class="nav-memories-btn"> Memories </button>
    <!-- added a dropdown class-name to the elements that have
         that role/purpose, this simplifies selection via
         the stylesheet: -->
    <div class="nav-memories-dropdown dropdown">
      <a href="#"> 2023 </a>
      <a href="#"> 2022 </a>
      <a href="#"> 2021 </a>
    </div>
  </div>
  <div class="nav-family">
    <button class="nav-family-btn"> Meet the Family </button>
    <div class="nav-family-dropdown dropdown">
      <a href="#"> Abby </a>
      <a href="#"> Jc </a>
      <a href="#"> Ana </a>
    </div>
  </div>
  <button class="nav-about-btn"> About Us </button>
</nav>