Jetpack Image Box Overlapping Logo

Hi all,

My issue is an interaction between the Soliloquy image logo and the Jetpack image box widgets.

As you can see on my site Little Seeds Farm School , I am trying to use the Jetpack image boxes to place the grassy areas on the left and right of the Soliloquy image logo.

This lines up properly at the largest resolutions but when I begin making my browser smaller, the responsive layout causes the right Jetpack Image widget box to overlap the logo. The left hand image box seems to slide neatly behind the image logo and I would like the right grassy area to do the same.

I’ve tried playing with the z-index CSS field as well as resizing all the elements, removing their padding and margins etc but I’m stuck at the moment.

Any help greatly appreciated, thanks!