Hi everyone, i'm currently working on a note project, i'm trying to center my notes using flex box without any useless spaces, take a look at the photos you will understand what i mean .
bottom space is just fine, the problem is the space that is caused by flex box on the right side , i want the yellow box to resize and fit but stay centered as well, the yellow box is a ul tag and the red boxes are li tags.
here is the css styles : ( container includes the whole page except the header )
.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;}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;}<title>Dashboard</title><div class="container"><ul><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></button></a><a href=""><button class="detail faint_color"><img class="edit-icon" src="/icons/edit.svg" alt="edit icon"></button></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></ul></div><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>