Divs are not aligning correctly when they are floating left – Photoshop

I am creating a website that will use a grid layout to show popular videos on the site, I want them to be shown in rows of 3. like so – this image was made in Photoshop:

But when I code these to my web page I get this result – the webpage is zoomed out so I can show the error, but this layout fault still happens when zoom is at 0%:

Here is the HTML code so each podcastCard:

<div class="podcastCard">
    <div class="podcastHolder">
        <div class="podcastImgContainer">
            <img src="{{ asset('img/podcastImgs/eboys-1.jpg') }}" alt="PodcastImg1" class="podcastImg">
        </div>

        <div class="podcastInfo">
            <div class="podcastLogoContainer">
                <img src="{{ asset('img/podcastImgs/logo/eBOYS-logo.jpg') }}" class="podcastLogo">
            </div>

            <div class="podcastNameContainer">
                <h4>Episode #2</h4>
                <p>eBOYS Podcast</p>
            </div>

            <div class="clearFix"></div>
         </div>

         <div class="podcastInteractions">
             <div class="interactionInfo">
                 <span class="far fa-eye"></span> <span>643K</span>
             </div>
         </div>
    </div>
</div>

Here is the CSS for each:

/* podcastVideos is the container that holds all the 'podcastCards' */
.podcastVideos {
    margin-inline-start: 100px;
    margin-inline-end: 100px;
}

.podcastCard {
    width: 33.333%;
    float: left;
    margin-block-end: 60px;
}

.podcastHolder {
    width: 80%;
    margin: auto;

    border: 1px lightgrey solid;
    border-radius: 10px;
}

.podcastImgContainer {
    width: 100%;
}

.podcastImg {
    width: 95%;
    margin-inline-start: 2.5%;
    margin-block-start: 2.5%;
    border-radius: 5px;
}

.podcastInfo {
    margin-block-start: 10px;
    margin-block-end: 10px;

    width: 100%;
    height: 57px;

    display: flex;
    align-items: center;

}

.podcastLogoContainer {
    width: 15%;
    float: left;
    height: 57px;

    display: flex;
    align-items: center;
}

.podcastLogo {
    width: 100%;
    border-radius: 50%;
    margin-inline-start: 7px;
}

.podcastNameContainer {
    width: 85%;
    float: left;
    margin-inline-start: 20px;
}

.podcastNameContainer h4 {
    height: 22px;
    overflow-x: scroll;
}

.podcastInteractions {
    border-top: 1px lightgrey solid;
    text-align: right;
}

.interactionInfo {
    margin-block-start: 5px;
    margin-block-end: 5px;
    margin-inline-end: 10px;
    color: grey;
}