Why does this navigation bar not want to become vertical!!!!!

sos

I'm trying to make my vertical nav bar into a horizontal one. this is the html for the nav bar:

    <div class="navigation">
     <ul class="nav">
      <li><a href="index.html">The Foyer</a></li>
      <li><a href="boutique.html">The Boutique</a></li>
      <li><a href="library.html">The Library</a></li>
      <li><a href="stables.html">The Stables</a></li>
      <li><a href="museum.html">The Museum</a></li>
     </ul>
    </div>

wherein
the navigation class defines the background container + location of the
bar itself, and obviously the unordered list (nav class) formats the
list

this is the css for both of them:

.navigation {
  margin: auto;
  padding: 3px;
  width: 80%;
  background-color: var(--paper);
  border-style: ridge;
  border-width: 5px;
  border-color: var(--green);
}

ul.nav {
  list-style-type: none;
  font-size:25px;
  line-height:2;
  margin: 0;
  padding: 0;
}

initially,
i thought defining all <li> elements inside of <ul>
elements (descendant selection) would work to make the list items
display inline instead of block, like so:

ul li {display: inline;}

but
that didn't work!! i tried ul.nav li {}, ul > li {}, li.nav {},
display:inline-block; , just putting the display: inline; inside of the
ul.nav.... nothing works!!! why are they still vertically aligned like
they're block elements what am i missing :,,(