List Items not filling Unordered List

Hello,

I'm pretty new to Web Development, and I'm trying to create a simple website. On one of my pages I have multiple list items within an unordered list. I've set the flex-basis to 33.33% and allowed it to wrap in hopes of getting three list items in each row. However, the list items are not filling the entire width of the unordered list; there is a significant gap on the left side. I would be grateful for any suggestions on how to make the list items fill the width of the unordered list.

Below I have attached a picture as well as the relevant HTML and CSS.

Thanks in advance!

HTML:

<main class="container">

    <ul>

      <li>First Video </li>

      <li>Second Video</li>

      <li>Third Video </li>

      <li>Fourth Video </li>

      <li>Fifth Video </li>

      <li>Sixth Video </li>

    </ul>

  </main>

CSS:

.container {

    width: 100%;

    margin: auto;

    max-width: 1000px;

    text-decoration: none;

    font-weight: 100;

    text-align: center;

    display: flex;

    justify-content: center;

}

ul {

    list-style-type: none;

    display: flex;

    font-weight: 400;

    margin: 0 auto;

    text-align: center;

    flex-wrap: wrap;

    border: medium solid #000000;

}

li {

    min-width: 250px;

    padding-top: 40px;

    padding-right: 40px;

    padding-left: 40px;

    padding-bottom: 40px;

    text-align: center;

    display: flex;

    margin: auto 0;

    border: thin solid #000000;

    flex-basis: 33.33%;

    justify-content: center;

    flex-wrap: wrap;

    position: static;

}