How to properly adjust SVG

Question

Good morning, you guys! I’d like some help, I’m taking my dick to use svg.

Basically I want to put a svg and put content inside it, but I know it doesn’t expand like a div, so I put a div underneath, with the same color to look like it’s a unique drawing.

[![insert image description here][1][1]

Only when I resize for mobile it kind of dislikes ( I know I could fix adjusting the media ), but I’m sure I’m doing it totally wrong!!! kkkkk Then it goes like this: [! [insert image description here][2][2]

The code is like this :

There are 2 different Ivs with 2 different classes.

.my-svg {
    height: 500px;
    background-image: url('../images/svg/wave.svg');
    background-repeat:no-repeat;
    background-position: center;
}

.elements-content {
    background: #44B4FF;
    width: 100%;
    margin-top: -65px;
}

Give a hand there, guys! Thank you. [1]: https://i.stack.Imgur.com/j9EGs.png [2]: https://i.stack.Imgur.com/Ypi0j.png