Unwanted horizontal scroll in css grid

I have been working on creating a similar image setup like here: https://readcereal.com/category/travel/ using CSS grid and I constantly encounter one issue - a horizontal scroll. I use Bootstrap for the navbar. It looks like in the attached image. Would anyone have idea why is that happening? I tried so many different CSS grid combinations and it never worked. Image: https://i.stack.imgur.com/7UwjN.png

Pls post your codepen. There may be different issues why a horizontal scroll could happen.