removing white space on a page between sections separated by a div

my html for spacer

<main>
   <section>...
   </section><div class="spacer layer1">
   </div><section>...
   </section>
</main>

my css for spacer

.spacer {
    aspect-ratio: 1080/300;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.layer1 {
    background-image: url(waves/col1.svg);
    border-top: 2px solid #d96459;
    border-bottom: 2px solid #f2ae72;
}

the issue :

the white space as shown seems to appear and disappear based on width on a computer screen while it stays on the mobile screen as shown in the picture.

I can't seem to find a workaround. Any help is appreciated.

Solution 1:

Assuming your SVG fills the entire viewbox, my guess is that the scaling sometimes results in the edges landing on fractional screen pixel boundaries.

Assuming you're seeing a transparent gap (as opposed to a white-ish rendering artifact) you might be able to use a negative vertical margins on the spacer to create a pixel or two of overlap.

section {
  min-height: 50px;
  background: tomato;
}

.spacer {
  margin: -5px 0; /* exaggerated for visibility. probably don't need this much.  */
  background: bisque;
  opacity: .5; /* so you can see the overlap */
  min-height: 30px;
}

<section></section>
<div class="spacer"></div>
<section></section>