how do i move this announcement tab to the right?

Question

i've tried to text align the announcement (h2) and text below (p), but it only tilted to the right of the box and not on the opposite side of the primary card title thing. i used bootswatch here so i think that contributes to the problem, thanks for the answers in advance.

<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">News 1</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </div>

<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">News 2</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </div>

  <h2 class="card text-white bg-primary mb-3">Announcements</h2>
  <p class="text-warning">Open Course 1 - Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  <p class="text-danger">Open Course 2 - Donec ullamcorper nulla non metus auctor fringilla.</p>

Answer 1

I suggest you to wrap both of the cards into a <div> and set this <div> display: flex;. It makes it way easier to align the cards.

HTML example:

<!-- align 1 card to left and the second one to right -->
<div class="d-flex justify-content-around">
   <div class="card ...">
      .....
   </div>
   <div class="card ...">
      .....
   </div>
</div>

Here is a working demo with 2 more examples of aligning the cards.