Thin space at edges of photos

Site URL: http://cobalt-koala-l3k2.squarespace.com

I have a wave graphic in 2 places on my homepage.  It is set to fit, and I've made sure the container is tall enough to capture the full image at the given width.  In edit mode everything looks fine.  Then when viewing on other devices (or scaling my window down to mimic other sizes), there will either be a thin white line on the left edge (this is persistent), or sometimes the wave doesn't fill the screen at all and has gaps on both sides (this is sporadic).  

What I'm thinking is a completely separate issue is that sometimes a thin area appears below the wave graphic, just above the footer.  I'm 99.9% certain is is being caused by the pinned image at the top of the section somehow "showing through" at the bottom of the section. Previously I had this image in it's own section with CSS making it a sticky section.  When I discovered that it was showing through at the bottom, I deleted that section and moved the image to the top of the about us/service area section and just made it a pinned block, then used a large shaped filled in the pale aqua to create the background for the text.  That seemed to fix it since I could have the aqua shape go to the bottom of the section.  But then, randomly today, it starting showing a small sliver again.  The wave image is set to fit, with alignment to the bottom of the container.

Does anyone have any ideas what could be causing these issues? I've attached screenshots because replicating in real life is spotty and seems to depend on device size.

Password to website is pools

Note: you can see the sliver of space on mobile screenshot if you click to make larger.  Also, the mobile wave image is a different block that the other two screenshots (using mobile query to display one over the other).