White line appears at end of gradient filled div at specific browser widths

I have a div with id #gradient_div with a background-image set to linear-gradient. I'm getting a gap between the end of the linear-gradient and the end of the div #gradient_div only at certain browser window widths. As I stretch and shrink the browser window this white line disappears and reappears.

It seems like it has something to do with the margin:

• When I have the margin set to margin: 0 1%;, the while line appears at specific window widths.

  At 1% the white line appears whenever the window width ends in the range of 68-92 ex: 468px-492px, 568px-592px, 668px-692px, etc.

  For other margin left and right percentages, the line appears at these page widths:

  • 2% : page widths ending in the range 92-_04 and 42-54

  • 3% : page widths ending in the range 34-41, 67-74, and 00-08

  • 30%: page widths ending in 5 or 8

There is NO white line problem when I just set the background to a color as apposed to a gradient, ex background: blue; or when I set the background-image to an image;

Suggestions to fix this are welcome but I'm mostly interesting in understanding why this line is happening. What's causing this?

    #gradient_div{
    background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86) , rgb(152, 4, 228));
    height: 100px;
    margin: 0 1%;
    border: 1px solid black;
    }

<div id="gradient_div"></div>