```
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <div class="card">
            <img class="card-img-top" src="Castle.jpg" alt="Card image fluid">
            <div class="card-body">
                <h3 class="card-title">Magic Kingdom</h3>
                <p>Walt Disney World's most popular park! Full of Attractions, characters, dining, and fireworks!</p>
                <a href="#" class="btn btn-primary">Learn More!</a>
              </div>
            </div>
          </div>
        </div>
      </div>

```

here is my code for one card. I pasted this code four time, as i want 4 different cards, but the cards are stacking on top of one another, instead of side by side. how do I fix? Thanks for any help, this is really bothering me.