Grid gap wont get smaller?

The grid gap for my projects section cant get smaller, I think it has something to do with the margin in the items but i tried to change that and nothing happened.

Also the page has a scroll which leads to white space on the right hand side, how do i make the page width only link to the screen?

Any help is appreciated, thanks.

https://codepen.io/kuwotu/pen/wvzQQMq

The white space on the right is because you have the width of the grid set to 1500px, so anyone who doesn’t have their browser at least 1500px wide (which is probably the majority of the people viewing the page) is going to see that white space and get a horizontal scroll bar.

You’ll need to make this design responsive if you want solve this problem.

1 Like

The gap is because grid-template-columns are 500px, but img width=400px.

1 Like

Turns out the grid-template-columns being 500px is what caused the white space, so solved both problems at once.

Thanks!