I'm trying to have the text centered vertically within the entire yellow space. I've been trying to implement the "align-items-center" onto the row, as suggested in their documentation, as well as the "my-auto" class. I'm not sure what I am doing wrong. 

```css
#heading-cont {
    background-color: #F7CE38;
    height: 10rem;
}

.white {
    color: white;
}

.title {
    font-family: 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
}

.description {
    font-family: 'Pathway Gothic One', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}
```

```html
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid" id="heading-cont">
    <div class="row">
      <div class="col-sm-12 my-auto">
        <h1 class="title white text-center">Digital</h1>
        <h4 class="description white text-center">This is the description.</h4>
      </div>
    </div>
  </div>
</section>
```

[CodePen Demo](https://codepen.io/minacosentino/full/OxZwYv)