How widget space behaves while responsive

I love this pagebuilder plugin. It was perfect for what I wanted in my site. (www.advocatesforschooltrustlands.org )

I have built my pages with it and have used background colors to great effect. another reason I like this plugin is how responsive things are. That is a neat feature. I am having issues with consistency of the responsiveness and spacing between pages, however.

Now I know about the option in each row to specify the space below the row and the gutter between widgets with the standard being 15px. There is no such design ability for defining the space below a widget only the gutter between and padding within.

Take a look at the Home page on a cell phone and you will see that some boxes look great and have the standard 15px of space between the widget boxes below it. Some boxes, like the brown “mission”, are touching the box below with 0 space between. It is similar with the next pages. The problem seems to be the space below the first column and the top of the following columns when you split up the rows this way.

The boxes are duplicates of each other and I have triple checked that setting for spacing of them. How do I make sure that the space is consitistent when the page becomes responsive?

Secondarily, if you look at the “connect” page www.advocatesforschooltrustlands.org/connect you will see that the responsiveness isn’t working correctly. Thes boxes don’t remain centered in the screen and seems to spill past the right screen edge with no slider to allow viewers to see the entire image or widget.

I don’t see what the difference is between the pages that “work” and the ones that “don’t work” when it comes to responsiveniss.

What am I missing? Please advise.