After changing the pictures, the position of the image shifted.
Here is where the old photos were positioned
And this shows the new positions with the updated photos
.column-2 {
float: left;
width: 33.3%;
padding: 5px;
padding-right: 30px;
display: inline-block;
}
.column-3 {
float: right;
width: 30%;
display: inline-block;
padding-right: 30px;
padding
}
.section-team {
text-align: center;
}
.members {
border-radius: 50%;
}
.upm {
padding-top: 25px;
padding-right: 5px;
}<section class="section-team" id="team">
<div class="row">
<h2>team members</h2>
</div>
<div class="column-2">
<img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/Picture2.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/Picture3.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/Picture5.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/Picture4.png" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/Picture6.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-3">
<img src="img/upm.jpg" class="upm" alt="upm" style="width:30%">
<h4>Partnered with UPM</h4>
</div>I'm looking for guidance on how to position the current photos similar to those in the original picture.