Set 3 columns, get 2

Looks like they need to update CSS.

To make 4 columns into 3, I had to add this CSS:

/* Fix up 3-products-per-line */
.woocommerce ul.products li.product:nth-child(4n+1), .woocommerce-page ul.products li.product:nth-child(4n+1) {
    clear: none;
}

.woocommerce ul.products li.product:nth-child(4n), .woocommerce-page ul.products li.product:nth-child(4n) {
    margin-right: 1.818181818181818%;
}

@media only screen and (max-width: 1100px) {
    .woocommerce ul.products li.product:nth-child(4n), .woocommerce-page ul.products li.product:nth-child(4n) {
        margin-right: 2.947368421052632%;
        width: 30.75%;
    }
}

@media only screen and (max-width: 600px) {
    .woocommerce ul.products li.product:nth-child(4n), .woocommerce-page ul.products li.product:nth-child(4n) {
        width: 48.33333333333333%;
    }
}

I just encountered little issue when creating product archive page using WooCommerce. I needed the product listing page to be 3 columns. After several attempts, it keeps dropping to just only 1 column. Please i need an urgent help or assistance on what next step to take.