I'm new to coding and I've recently started using HTML, CSS, and Bootstrap 4. Currently, I'm working on a webpage that includes a navigation bar, 4 cards, and a footer with information. I utilized Bootstrap to create rows and columns, but I'm encountering alignment issues. How can I resolve this situation?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="MYCELIUM.CSS">
<link rel="stylesheet" href="activities.css">
</head>
<script src="https://kit.fontawesome.com/a8809e8f88.js" crossorigin="anonymous"></script>
<body>
<div class="col-md-4 col-sm-6 boxy" class="wrapper">
<div class="pop-up">
<div class="front">
<img class="girlimg" src="girl.jpg" alt="asdasda">
<p><h2 class="activname">Guided hiking tours</h2></p>
<button class="activbutt" type="button" name="button">SEE DETAILS</button>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<p></p><br>
<div class="pop-up-2">
<div class="card-2">
<img class="girlimg" src="bike.jpg" alt="bikeactiv">
<p> <h2 class="activname1">Rent a bike(4 hours)</h2> </p>
<button class="activbutt1" type="button" name="button1">SEE DETAILS</button>
</div>
<div class="details">
<div class="duration1">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids1">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<div class="wrapper1">
<div class="pop-up-3">
<div class="card-3">
<img class="girlimg" src="climbing.jpg" alt="clim">
<p> <h2 class="climbing">Climbing</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span>FULL DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
<div class="pop-up-4">
<div class="card-4">
<img class="girlimg" src="canoe.jpg" alt="clim">
<p> <h2 class="climbing">Canoe</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:6</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:2</p>
</div>
</div>
</div>
</body>
</html>