Unable to align link items side by side inside a div

Question

I am unable to align li items inside a div side by side using flex.

All the links appears vertically but I want them to be horizontally.

.provinces {
  margin-top: 20px;
}

.provinces-header h3 {
  text-align: center;
}

.provinces-items {
  display: flex;
}

.provinces-items ul li a {
  display: inline-block;
  text-decoration: none;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8%;
}

<div class="provinces">
  <div class="provinces-header">
    <h3>Provinces</h3>
  </div>
  <div class="provinces-items">
    <ul>
      <li><a href="">Ontario</a></li>
      <li><a href="">British Columbia</a></li>
      <li><a href="">Alberta</a></li>
      <li><a href="">Manitoba</a></li>
      <li><a href="">Nova Scotia</a></li>
      <li><a href="">Saskatchewan</a></li>
    </ul>
  </div>
</div>

Answer 1

You have mistaken the class for the list

.provinces-items {
    display: flex;
}

should be

.provinces-items ul {
    display: flex;
}

Answer 2

update your CSS to :

.provinces {
  margin-top: 20px;
}

.provinces-header h3 {
  text-align: center;
}

.provinces-items ul{
  display: flex;
  align-items: center;
  gap: 2rem;
}

.provinces-items ul li a {
  display: inline-block;
  text-decoration: none;
  justify-content: space-between;
  align-items: center;
}