I am trying to fill up the top portion of my info box, but the grey header in my card-info box doesn't touch the top of the box

But not the case with my boxes

That’s because in your css you .card class has a padding: 19px;

A solution can be:

.card {
  padding: 0px;

.card-header {
  padding: 19px;

.card-body {
  padding: 19px;

In your html you must put your h1 with the price into de div class = card-header. Something like this:

<div class="card-header">
  Tenor trombone
  <h1 class="card-header">$600</h1>