I'm having trouble making the entirety of my Bootstrap 4 Card clickable. I'm using HTML5 and Bootstrap 4 and cannot make the containing card clickable. The image and the text is clickable but I want a user to be able to click anywhere on the box. I have tried wrapping it with a link and the card looks clickable but it is not entirely. Help is appreciated
Codepen: https://codepen.io/anon/pen/PVNXgV
HTML
<div class="container">
<div class="card-deck flex-row flex-nowrap">
<div class="card">
<a href="http://google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap"></a>
<a href="http://google.com">
<!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
<div class="card-body">
<a href="http://google.com"><h3 class="card-sub align-middle">Card Title</h3></a>
<p class="time-card">2 Days Ago</p>
</div><!-- END CARD-BODY -->
</a>
</div><!-- END CARD -->
</div><!-- END CARD DECK -->
</div><!-- END CONTAINER -->
CSS
.card-container{
max-width:1400px;
width:95%;
}
.card-body{
max-width:250px;
padding-left:10px;
margin-top:0px;
transition:.3s;
-webkit-transition:.3s;
}
.card-deck{
margin-bottom:3.2rem;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.front-deck{
padding-top:12rem;
}
.card{
margin-right:16px;
border:none;
flex: 0 0 auto;
}
.card .card-body:first-of-type{
border:2px solid #96cecf;
border-top:0px;
}