Need help making 2 divs overlap with a svg

Solution for Need help making 2 divs overlap with a svg
is Given Below:

I am trying to get the bottom div to overlap onto the top one with a wavy svg to make it look like that the bottom div has a wavy line on it that overlap the top div

but this is what I get
enter image description here

I have tried to fix it but I cant seem to figure it out
HTML

 * {
        margin: 0%;
        padding: 0%;
    }
    .header-container {
        width: 100%;
        height: 1000px;
    }
    
    .header-top {
      width: 100%;
      height: 50%;
      background-color: #3C8DAD;
    }
    
    .header-bottom {
        width: 100%;
        height: 50%;
        background-color: #F5A962;
    }
 <div class="header-container">
        <div class="header-top"></div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#F5A962" fill-opacity="1" d="M0,192L48,192C96,192,192,192,288,186.7C384,181,480,171,576,192C672,213,768,267,864,261.3C960,256,1056,192,1152,176C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
            <div class="header-bottom">
        </div>
    </div>
        

Not too sure about your final goal, but from what you have, you can either reset display or vertical-align on svg, and simply set the blue background to the parent container.
Thats not really an answer but a comment with a demo also asking you to clarify your final use . The SVG could also be send to the background over a gradient.

from your code and little CSS modification :

* {
  margin: 0%;
  padding: 0%;
}

.header-container {
  width: 100%;
  height: 1000px;
  background-color: #3C8DAD;
}

.header-top {
  width: 100%;
  height: 50%;
}

svg {
  vertical-align: top;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #F5A962;
}
<div class="header-container">
  <div class="header-top"></div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#F5A962" fill-opacity="1" d="M0,192L48,192C96,192,192,192,288,186.7C384,181,480,171,576,192C672,213,768,267,864,261.3C960,256,1056,192,1152,176C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
  <div class="header-bottom">
  </div>
</div>

Setting an height of 1000px + 2containers of 50% of height and drop an svg there might not be what your after ;), at least for the possible use of the markup

* {
    margin: 0%;
    padding: 0%;
}

svg {
  position: absolute;
  top: 100px;
  left: 0;
}

.header-container {
    width: 100%;
    height: 1000px;
}

.header-top {
  width: 100%;
  height: 50%;
  background-color: #3C8DAD;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #F5A962;
}

I believe this is what you want to do: CodePen.

The issue is that HTML treats the SVG as any other tag and tries to put it on the screen on the order of the defined elements.

In order to overlap an element with another, you have to play around the position css property, in this case, I made it absolute and then defined the position, this works ok because you have a fixed height for the container.

I think you have to eliminate the border of the svg file

I didn’t get exactly what you need but I think something like this.

Try this styles

* {
  margin: 0%;
  padding: 0%;
}

.header-container {
  width: 100%;
  height: 1000px;
  position: relative;
}

.header-top {
  width: 100%;
  height: 50%;
  background-color: #3c8dad;
  position: relative;
}

svg {
  position: absolute;
  bottom: 0;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #f5a962;
  position: absolute;
  bottom: 0;
}

with this HTML

<div class="header-container">
  <div class="header-top">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#F5A962" fill-opacity="1" d="M0,192L48,192C96,192,192,192,288,186.7C384,181,480,171,576,192C672,213,768,267,864,261.3C960,256,1056,192,1152,176C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
  </div>

  <div class="header-bottom"></div>
</div>