how to fix CSS div's not aligning properly

Question

I have 3 div cards that are displaying different sets of information. And I've tried to set them to display:grid while setting the fractions equally but for some reason the divs stack awkwardly?

JS fiddle demo

     <!--Main Background-->
    <div class="background">
      <!--Main working panel-->
      <div class="workspace">
        <!--Memberships Card-->
<div class="card text-center profile-card box box-primary">
    <div class="card-body" >
      <h5 class="card-title" style="color:white;"><i class="far fa-credit-card"></i>  Memberships</h5>
      <p class="card-text" style="color:rgba(255, 255, 255, 0.295);">Set or adjust your membership status</p>
    </div>
    <div class="card-footer"style=" padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;" >
        <ul class="list-group list-group-unbordered">
            <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
              <div >
              <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per " day "</b>
            </div>
            </li>
            <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                <div >
                <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per " day "</b>
              </div>
              </li>
              <li class="list-group-item" >
                  <div >
                  <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255); float:right;">I want to spend £ " " per " day "</b>
                </div>
                </li>
          </ul>
    </div>
</div>
        <!--Profile card-->
        <div class="card text-center profile-card  box box-primary">
            <div class="card-body" >
                <img src="img/pickles.png"  class="mr-3 profile-icons " alt="...">
                <br>


                      </li>
                  </ul>
            </div>
        </div>
        <br>
<div>
        <!--Target Card-->
        <div class="card text-center profile-card  box box-primary">
            <div class="card-body" >

                    </div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                        <div >
                        <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                      </div>
                      </li>
                      <li class="list-group-item" >
                          <div >
                          <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                        </div>
                        </li>
                  </ul>
            </div>
        </div>
      </div>
        <br>

        <!--Target Jumbotron-->
        <div class="card profile-jumbotron" >
            <div class="container">
              <h1 class="display-4">Charts</h1>
              <p class="lead">
                  <canvas id="myChart" width="400" height="100"></canvas>
                  <input type="button" value="Add Data" onclick="adddata()">                <div class="progress">

                <div class="progress">
                  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</p>
            </div>
          </div>

      </div>

    </div>

Can someone see why it's not aligning properly? Instead it pops out the bottom of the screen? There's even a commented out jumbotron I tried aligning with them but that didn't work at all.

Answer 1

JSFiddle Demo

1. You had a extra div wrapper for your last div section

2. Remove unnecessary br tag

<div class="card text-center profile-card  box box-primary">
       <div class="card-body" >
              <h5 class="card-title" style="color:white;"><i class="fas fa-bullseye"></i>  Targets</h5>
              <p class="card-text" style="color:rgba(255, 255, 255, 0.295);">Set or adjust your performance targets</p>
       </div>
       <div class="card-footer"style=" padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;" >
               <ul class="list-group list-group-unbordered">
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                      <div >
                      <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                    </div>
                    </li>
                    <li class="list-group-item" style="border-bottom: 0.15em solid white !important;">
                        <div >
                        <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                      </div>
                      </li>
                      <li class="list-group-item" >
                          <div >
                          <b style="color:#FEBD69; float:left;"><i class="fas fa-book-reader"></i> text</b> <b style="color:rgb(255, 255, 255);float:right; ">I want to spend £ " " per " day "</b>
                        </div>
                   </li>
              </ul>
       </div>
 </div>