How to center grid content in Mobile Landscape & Portrait modes?

In the third section of this web page, where it says “Protocols”, I’m having a problem with the content running off the screen when I switch to the Mobile Portrait or Landscape breakpoints.

Inside that section named section-home-protocols-2col, I have a grid named protocols_grid-wrapper that contains two child divs. I used a grid for this section so that I can stack the content and logos at mobile breakpoints.

Inside this parent grid I have two child divs, protocols_content-wrapper and protocols_logo-wrapper. The latter div was also built as a grid so that I can adjust the number of logos at smaller breakpoints.

The problem is that when I change to either Mobile breakpoints, the divs expand beyond the right side of the screen. I thought that changing the content-wrapper div to a Block layout would fix it but it doesn’t. And even if that worked, I don’t think I could do that to the logo-wrapper div since it needs to be a grid. With the latter div, I could reduce the number of columns (I will need to do that anyway) that doesn’t solve the underlying issue which is that I want that entire grid to be contained and centered within the left and right sides of the display.

How do you fix a problem like this? Thanks!

P.S. Please note that once I can fix this problem, I will convert the “Services” section below it to a similar layout except that the Services content will be displayed below the Protocols logos and the Services images will go below the Protocols content.

Here is my site Read-Only: LINK

I recommend you upload as many screen shots/screen cast videos as possible to help others help you faster.

UPDATE: I fixed the problem by setting the layout for the protocols_grid-wrapper to Distribute > Justify Content: Space Around and then reducing the gaps between the rows and columns in the child grid, protocols_logo-wrapper.