1px separation between two divs

The div that contains the absolutely positioned wave svgs has no set height.
The contact section below has no set height.

Zooming in and out shows it if it's not showing itself already. Sometimes just scrolling makes it pop out.

The svgs have no stroke just fill. Made on inkscape.
Problem is on chrome, edge, and firefox.

What I've tried:
-Editing the svgs
-Giving wave container a set height
-giving margins to surrounding containers to identify where the separation is happening
-wrapping all the containers in another container and flexing them column
-putting the svgcontainers in the previous section instead of it's own div in between the sections
-line-height: 0 and display: block to images referencing the svgs
-and im sure a few small things i threw around and don't remember

Here's the code-pen for the code, but not much visualization.
https://codepen.io/healspls/details/zYVmEZK
Here's the deployed website location, very rough draft
https://ayesha-mock-website.netlify.app/

Thank you for taking the time.
Screenshot_2024-09-02_103033.png
CodePenastro
...
problem
Was this page helpful?