Creating grids using repeat(auto-fit, minmax( , ))

I am trying to familiarize myself with using repeat, auto-fit and minmax and I am confused as to why my grid is overflowing the container or why the grid elements are overlapping each other.

I noticed is that the CSS code in #navbar is overriding what is going on in navbar-list so that is why the header is not fully extended. I deleted it and fixed that issue.