Align cards in page using css - html

Question

I have made 4 cards using css, html and bootstrap 3. For some reason the first row doesn't have the 3 cards that i want but the second is, and they are not aligned perfectly when i zoom in(pixels difference).What can i do? You have an img down below of my 4 unaligned cards.
Here is the code :
HTML:
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div>
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<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>
</div>
<br />
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>
CSS:
[![> .front{
margin-top: 30%;
width: 750px;
height:750px;
background-color: #F7F4F2;
align-items: baseline;
margin-left: 20%;
position: relative;
border-radius: 10%;
align-self: flex-start;
}
.girlimg{
max-width: 500px;
min-height: 475px;
border-radius: 10%;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: space-between;
position: absolute;
top:0;
right:0;
margin-left: %;
margin-top: 15%;
font-size: 30px;
}
.duration{
margin-bottom: 25%;
}
.people{
margin-bottom: 25%;
}
.kids{
margin-bottom: 25%;
}
.activname{
display: flex;
flex-direction: row;
margin-left: 7%;
margin-bottom: 5%;
font-size: 45px;
}
.activbutt{
background-color: #ffcc66;
border-radius: 2%;
display: flex;
margin-left: 20%;
font-size: 30px;
padding: 20px;
border: none;
}
Image of my 4 cards:
https://i.stack.imgur.com/6kDFU.png

Answer 1

I removed unwanted margins from your code. Please check this snippet.
.front {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #F7F4F2;
position: relative;
margin-bottom: 15px;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.activname{
font-size: 20px;
}
.activbutt{
background-color: #ffcc66;
text-align: center;
padding: 10px;
border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<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>
<div class="col-lg-12"></div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>