How do I expand a the width of a row to be 100% of its containing div. I have the following configuration and cannot get the row to expand to the width of parent container. The BS4 documentation state using w-100 but this does not work. Neither does adding the d-inline-block. Thank you.
.container {
width: 90%;
border: 1px solid black;
height: 200px;
}
.row {
width: 100%;
background-color: lightblue;
}
.col-12 {
width: 100%;
background-color: lightgrey;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">CONTAINER<div class="row w-100">ROW<div class="col-12">COL-12</div></div></div>