How can I center the 'items' in my scrolling frame?

I have this Inventory system I made and the only thing that bugs me is how uncentered everything is in the ScrollingFrame.

Reference:

all of the frames/updates are handles via a script but I am not sure where I went wrong, anyone have any feedback it would be greatly appreciated!

Code:

-- Set up a responsive UIGridLayout inside the ScrollingFrame
local gridLayout = frame:FindFirstChildOfClass("UIGridLayout")

-- Set square CellSize and adjust CellPadding to fit 4 square items per row
gridLayout.CellSize = UDim2.new(0.22, 0, 0.72, 0) -- 22% of the frame's width and height, making each item square
gridLayout.CellPadding = UDim2.new(0.03, 0, 0.07, 0) -- Padding to space items evenly without breaking the row layout
gridLayout.FillDirectionMaxCells = 4 -- Maximum 4 cells per row
gridLayout.FillDirection = Enum.FillDirection.Horizontal -- Fill horizontally

Try gridLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center