Image not showing / z-index not working as expected

I am trying to place a Divider with some skies at the bottom of my background image (class="divider-clouds"). For some reason, they just won't show - Seems like the clouds are hidden behind the background-image.

I've been playing around with z-index in order to get the clouds on top of the background-image. But didn't seem to help either. What am I missing??

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TurboTobias</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section id="hero-section">
        <div class="row">
            <div class="column hjemmeside-til-skyerne">
                <h1>Vil du have
                    <div class="h1-enhanced">raketfart</div>
                    <div class="h1-smaller">på din hjemmeside?</div>
                </h1>
                <span class="sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
            </div>
            <div class="column">
                <h2>Column 2</h2>
                <p>Some text..</p>
            </div>
            <div class="divider-clouds"></div>
        </div>
    </section>
</body>

</html>

CSS:

body {
    background: #fff;
    color: #333333;
    height: 100vh;
    margin: 0;
    box-sizing: border-box;
    font-family: open sans,Arial,sans-serif;
  }

#hero-section {
    background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: 1;
    position: relative; 
}

.row {
    height: 100vh;
    width: 80%;
    max-width: 1080px;
    margin: auto;
    display: flex;
    z-index: 1;
  }

  .hjemmeside-til-skyerne {
    display: flex;
    align-self: center;
    align-items: center;
    flex-direction: column;
  }

  .hjemmeside-til-skyerne h1 {
    font-weight: 700;
    font-size: 60px;
    color: #303030!important;
    line-height: 1em;
    text-transform: uppercase;
  }

  .h1-enhanced {
    font-weight: 900;
    font-size: 120%;
}

.h1-smaller {
    font-size: 70%;
}

.sub-h1 {
    font-size: 24px;
    color: #303030;
    font-weight: 400;
}

.divider-clouds {
    background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
    background-size: cover;
    background-position: center top;
    bottom: 0;
    height: 100px;
    position: absolute;
    z-index: 10;
}

Code snippet

I would expect the clouds showing at the bottom with a height of 100px.

Solution

You should add a with of 100% on your .divider-clouds element style.