Buttons collide or overlap on tablet, phone landscape, and scaled down browser

salmonriverdrifters.com

password: Salmonriverdrifters 

On the landing page (home) my buttons do not scale properly. I’ve searched these forums for hours and can’t solve this issue. They are set to fill, fit made them worse. Specifically the first row is the worst, but the second row is also affected. It seems that the right buttons are also clipping off the screen for some reason. 
 

I’m a complete rookie but think I’m getting the hang of the basic stuff. I believe this is 7.1?

Mobile view is fine

Any insight? 
 

Thanks!

Initial pic was an iPhone 14 pro max in landscape. 

Here is an example from an iPad in landscape. No big blue bars on either side. Bottom buttons seem fine but top buttons are bad. 

Sorry for my late reply, but I fiddled forever and fixed it! I did set to fill and changed the sizing, kind of frustrating but it worked out!