Height property in Child Element and Height property in Parents Element with box-sizing boder-box CSS

Question

I am new css programming, after learning basic css, i try some project about personal blog project.

This is a tutorial that i follow

Here, brief code

index.html

<!-- hero section -->
    <div class="hero" id="home">
        <div class="hero__container">
            <h1 class="hero__heading">Choose your <span>color</span></h1>
            <p class="hero__description">Unlimited Possibilities</p>
            <button class="main__btn"><a href="#">Explore</a></button>
        </div>
    </div>

style.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Kumbh Sans', sans-serif;
    scroll-behavior: smooth;
}

/* hero section */
.hero {
    background: #000000;
    background: linear-gradient(to right, #161616, #000000);
    padding: 200px 0;
}

.hero__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;

    height: 90%;

    text-align: center;
    padding: 30px;
}

When i try replace height with some value (ex: 1%, 100%, 10%), but i dont see any change, anybody explain for me, thank you.

I already read a same question but i really dont understant.

Thank you.