3 Column Projects not aligned

Hi,

I have been trying to manipulate the Projects widget using a child theme so that the projects appear in rows of three.

I have used the following code in my style sheet:

@media only screen and (min-width: 992px) {
    
.atframework_projects_widget .project {
width: 33% !important;
} 
.project:nth-of-type(3n+1), {
clear: none;
}
}

The styling has worked in that the top row displays as 3 but what would be the fourth image is on a row of it’s own. This is followed by another row of 3 then of one followed by a final row of 1.

The reason for wanting 3 columns is that I have 9 projects (Treatments)

Here is a link to the site.

http://tpr.spwalmsley.com

Thanks

Hi,

Looks like you do not need to use this code:

.project:nth-of-type(3n+1), {
    clear: none;
}

Please remove it and let see how it works.

Regards,
Awan