Place SVG divider under video background header - html

Question

I am creating a hero background, and would like to position my svg divider underneath the video so that it blends into the background below.
At the moment it appears right next to the buttons which is incorrect.
I'd like it to look like this:
How can I fix this?
<header>
<div class="overlay"></div>
<video onloadedmetadata="this.muted = true" playsinline autoplay muted loop preload="auto">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4" />
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3 text-white">Launch on time,<br />look on-trend.</h1>
<div class="mb-4">
<p class="lead px-xl-5">
Save countless hours of design and development and ship performant sites with killer
looks.
</p>
</div>
<button class="btn btn-lg btn-white mx-1">Button 1</button>
<button class="btn btn-lg btn-primary-3 mx-1">Button 2</button>
</div>
<div class="divider flip-x">
<svg
width="100%"
height="96px"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
>
<path d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
</div>
</div>
</div>
</header>
I've also posted a fiddle here: https://jsfiddle.net/vtb4zep5/.

Answer 1

<header>
<div class="overlay"></div>
<video onloadedmetadata="this.muted = true" playsinline autoplay muted loop preload="auto">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4" />
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3 text-white">Launch on time,<br />look on-trend.</h1>
<div class="mb-4">
<p class="lead px-xl-5">
Save countless hours of design and development and ship performant sites with killer looks.
</p>
</div>
<button class="btn btn-lg btn-white mx-1">Button 1</button>
<button class="btn btn-lg btn-primary-3 mx-1">Button 2</button>
</div>
</div>
</div>
</header>
<div style="position: relative">
<div class="divider flip-x" style="position: fixed; bottom: 0px; width: 100%">
<svg width="100%" height="96px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
</div>
</div>
jsfiddle