I am currently designing a bootstrap 4 layout with four columns, but starting with just three. I have an outer div container and an inner row with three columns. However, when I add borders to all the containers, I notice that the row does not expand to fill the entire parent container div. Despite trying various CSS properties, I am unable to determine why it is not stretching to fit the parent container. My goal is to have the center column width be 100% minus the total percentage of the other two columns (which contain arrow images). Feel free to check out the code and resulting render on this jsfiddle link.
(mostly) Complete code:
https://jsfiddle.net/ukd5stc0/
Code sample as required by stackoverflow:
<div class="container touchpointContainer">
<div class="row tall wide">
<div class="col-1 centerVertically">
<a onclick="advanceReview(-1)">
<img class="prev" src="leftArrow.png"/>
</a>
</div>
<div class="col-10 centerVertically mainText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore"
</div>
<div class="col-1 centerVertically">
<a onclick="advanceReview(1)">
<img class="next" src="rightArrow.png"/>
</a>
</div>
</div>