Responsive Downloads Grid

Hi, I’m trying to get my downloads page to be fully responsive. It starts with 4 columns. I’ve added the following media query :

@media screen and (max-width: 900px) {
.edd_downloads_list div[id*=”edd_download_”] {
width: 33% !important;
float: left !important;
margin: 0 auto 0px !important;
text-align: center;
}
}

At 900px it splits the first row of 4 in to a row of 3 and a row of 1, and so on for all the other rows. How can I make this a normal 3 column grid?

https://www.razorflyers.com

Regards
Mark