Bootstrap Cards aren't aligning correctly

Question

So, basicly i have these bootstrap cards in a for loop in python flask, everything works well besides the alignment of the cards itself. My cards have good spacing, but when it goes to the next row the card on the second row sticks to the card above it on the first row.

Here is a Screenshot: https://ibb.co/tsscqzb

HTML:

<div class="container">
      <div class="row row-cols-auto">
        
        <div class="col">
        <div class="card" id='cardPostPost'  style="width: 350px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
          <h5 class="card-header border-bottom border-light" style="color: white" >Teacher&#39;s Homework</h5>
          <div class="card-body" style="color: white" >
           <h5 class="card-title">Homework</h5>
            <p class="card-text">No </p>
           <a href="#" class="btn btn-primary">Learn More</a>
           </div>
      </div>
      </div>
      
        <div class="col">
        <div class="card" id='cardPostPost'  style="width: 350px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
          <h5 class="card-header border-bottom border-light" style="color: white" >SomeNewTask</h5>
          <div class="card-body" style="color: white" >
           <h5 class="card-title">Homework</h5>
            <p class="card-text">Yes </p>
           <a href="#" class="btn btn-primary">Learn More</a>
           </div>
      </div>
      </div>
      
        <div class="col">
        <div class="card" id='cardPostPost'  style="width: 350px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
          <h5 class="card-header border-bottom border-light" style="color: white" >wdaadadawdawdad</h5>
          <div class="card-body" style="color: white" >
           <h5 class="card-title">Test</h5>
            <p class="card-text">Yes </p>
           <a href="#" class="btn btn-primary">Learn More</a>
           </div>
      </div>
      </div>
      
        <div class="col">
        <div class="card" id='cardPostPost'  style="width: 350px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
          <h5 class="card-header border-bottom border-light" style="color: white" >wdadwadadadwadawdad</h5>
          <div class="card-body" style="color: white" >
           <h5 class="card-title">Test</h5>
            <p class="card-text">Yes </p>
           <a href="#" class="btn btn-primary">Learn More</a>
           </div>
      </div>
      </div>
      
        <div class="col">
        <div class="card" id='cardPostPost'  style="width: 350px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white; bottom: -22pc; left: -18pc; ">
          <h5 class="card-header border-bottom border-light" style="color: white" >awdadadad</h5>
          <div class="card-body" style="color: white" >
           <h5 class="card-title">Test</h5>
            <p class="card-text">Yes </p>
           <a href="#" class="btn btn-primary">Learn More</a>
           </div>
      </div>
      </div>

I tried deleting the automatic set row thing, but it still didn't work. Does anyone know how to fix this problem?