ался заставить ребенка div принимать рост 100%, но он не работает, поэтому я хотел бы знать, почему он не работает: я даю html, рост: 100%, затем .hero height 100% и .hero-image must быть 100%:

html, body{
    height:100%;
}
.hero{
    width:100%;
    height:100%;
    border:1px solid #0094ff;
    .hero-image{
        width:100%;
        height:100%;
        background-image:url('../images/1.jpg');
        background-size:cover;
    }
}

<section class="hero">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="hero-image">
                    Hello
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-content">
                    <h1>Hey, I Am Mike Ross</h1>
                    <p>
                        Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
                    </p>
                </div>
                <div class="skills">

                </div>
            </div>
        </div>
    </div>
</section>