'Why isn't the card-deck div aligning the cards? [closed]

Wondering why this top card-deck is not aligning my cards! I have run the code successfully with just the cards, when I add the card-deck I expect for the cards to align with same height and width but nothing is happening. The cards still are in the same column. Please help!

<div class="card-deck">
  <div class="card">
     <div class="card-header">
      <h3>Chihuahua</h3>
     </div>
     <div class="card-body">
      <h2>Free</h2>
      <p>5 Matches Per Day</p>
      <p>10 Messages Per Day</p>
      <p>Unlimited App Usage</p>
      <button type="button">Sign Up</button>
     </div>
    </div>

      <div class="card">
        <div class="card-header">
          <h3>Labrador</h3>
        </div>
        <div class="card-body">
          <h2>$49 / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
  </div>
</div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source