Centered flexbox is cropping my first element

Question

In my page, I have a footer with a horizontal list, filled with dynamic items. When my list items are shorter than the page width, I want my list to be centered, and this works fine.

But when my list grows, or my page shrinks, the first items of my flexbox get cut away from the list. You can see what I mean in the example below.

How can I make the list centered in the page, but aligned to the left when the space isn't enough?

#footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.footerList {
    position: relative;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    scroll-behavior: smooth;
}

.footerList ul {
    overflow-x: scroll;
    white-space: nowrap;

    list-style: none;
    display: flex;
    justify-content: center;
}

.footerList li {
    padding: 0;
    margin-right: 3vw;
}

<div id="footer">
    <div class="footerList">
        <ul class="footerListUl">
          <li>Item 01</li>
          <li>Item 02</li>
          <li>Item 03</li>
          <li>Item 04</li>
          <li>Item 05</li>
          <li>Item 06</li>
          <li>Item 07</li>
          <li>Item 08</li>
          <li>Item 09</li>
          <li>Item 10</li>
          <li>Item 11</li>
          <li>Item 12</li>
          <li>Item 13</li>
          <li>Item 14</li>
          <li>Item 15</li>
          <li>Item 16</li>
          <li>Item 17</li>
        </ul>
    </div>
</div>