这个问题有很多解决方案，取决于你想走哪条路，
如果注解不需要精确的330 px宽，您可以通过替换以下内容来消除间隙：

width: 330px;

与

flex: 200px;

这利用了Flexbox的流体响应性。
这种灵活解决方案的一个问题是 Package 时的“剩余”元素：例如，横跨三个元素，第四个元素将换行并增长到父元素的全宽：

要使用Flex解决此问题，您需要：
1.将flex更改为类似flex: 0 1 50%;的类型，并禁用百分比值和灵活增长，这意味着您需要@media查询来给予列表以前的流动性
1.使用JavaScript解决方案根据其他列表动态设置最后一个元素的宽度（如**@SnoopFrog的**答案）
如果您确实需要注解为330 px宽，我会将父<ul>设置为列表width: 785px;的两倍大小，并确保justify-content: center;
或者，转向CSS grid或简单的inline-block方法可能适合您的需要，但这两种方法都需要@media查询以获得响应度。

正如我在评论中所说的，我不认为您可以使用纯HTML/CSS解决这个问题，但您可以计算在给定时间内.container中可以容纳多少元素，并更改ul中的width。
检查以下代码：

function totalWidth(element) {
  style = window.getComputedStyle(element)
  return parseFloat(style.marginLeft) + parseFloat(style.marginLeft) + parseFloat(style.width)
}

function resizeContainer() {
  const container = document.querySelector(".container")
  const element = document.querySelector(".container ul")
  const children = document.querySelector(".container ul li")
  const childrenWidth = totalWidth(children)
  const amountFits = Math.floor(Math.min(container.offsetWidth, 1400) / childrenWidth)
  element.style.width = `${childrenWidth * amountFits}px`
}

resizeContainer()
window.addEventListener("resize", resizeContainer)

.container {
  width: 100%;
  display: flex;
  height: 100vh;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

ul {
  align-content: flex-start;
  margin: 40px auto;
  max-width: 1400px;
  width: fit-content;
  height: 80vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow-y: scroll;
  margin-top: 100px;
  border: 3px solid yellow;
  padding: 0;
}

ul li {
  border: 2px solid red;
  list-style-type: none;
  font-size: 20px;
  margin: 5px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(10px);
  width: 330px;
  height: 200px;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  transition: height 0.3s;
  box-sizing: border-box;
}

<div class="container">
<ul>
<li>test</li><li>test</li>
<li>test</li><li>test</li>
</ul>
</div>

请注意，我将box-sizing: border-box;添加到了ul li中，这样计算元素的实际大小会更容易一些，当然，您可以忽略这一点，并更改我的totalWidth方法以按照您喜欢的方式计算它。
我不认为你可以做不同的，但我希望被证明是错误的。

* {
    /* just for reset and for remove all margins and paddings */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    display: flex;
    /*justify-content: flex-start; don't need this, is start by default
    align-items: flex-start;*/
    /* magical words that they can align internal box(li) */
    justify-content: center;  
    align-items: center;

    margin: 40px auto; /*auto <--> both part is ok*/
    max-width: 1400px;
    /* just for see the center(you can remove this width static of 25rem */
    width: 25rem; /* width: fit-content; */
    height: 80vh;
    overflow-y: scroll;
    margin-top: 100px;
    border: 3px solid yellow;
}

ul li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;

    border: 2px solid red;
    list-style-type: none;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(10px);
    width: min(100%, 330px);   /*make it responsive, when shrink down, under 330px, is take 100% of width avaiable, and not overflowing*/
    height: 200px;
    margin: 10px auto; /*in every elements, you can use margin auto for both parts*/
    padding: 20px;
    border-radius: 5px;
    transition: all 0.3s; /*transition:height 0.3  --> not height, but all inside!*/
    /* overflow: hidden; don't need, that not should be overflow */
    /* position: relative; Is by default! like height:auto*/
}

/* if you want to style your buttons, write this code all times */
/* remove deafult aspect of a btn and others, beacuse every browser take a different style*/
button, input, a {
    appearance: none;
        -webkit-appearance: none;
            -moz-appearance: none;
}

<title>Dashboard</title>

    <ul>
        <div class="wrapper">
            <li class="item">
                <div class="priority"></div>
                <span class="title c-title"> title </span>
                <span class="content c-content"> Content </span>
                <span class="date"> date </span>

                <div class="item_buttons">
                    <a href="">
                        <button class="detail faint_color">
                            <img class="edit-icon" src="/icons/invisible.svg" alt="see icon">
                        </button>
                    </a>
                    <a href="">
                        <button class="detail faint_color">
                            <img class="edit-icon" src="/icons/edit.svg" alt="edit icon">
                        </button>
                    </a>
                    <a href="">
                        <button class="deleteButton detail faint_color">
                            <img class="edit-icon" src="/icons/trash.svg" alt="delete icon">
                        </button>
                    </a>
                </div>
            </li>
        </div>
    </ul>

    <div class="addButton">
        <img class="addButtonImage" src="/add.svg" alt="add new note" />
        <div class="smallMenu hide">
            <a href="/modify/folders">
                <button class="folders_button">
                    <img src="/icons/folder.svg" alt="folder icon">
                </button>
            </a>
            <a href="/note/add">
                <button class="addNote_button">
                    <img src="/icons/pen.svg" alt="pen icon">
                </button>
            </a>
        </div>
    </div>