WooCommerce - Change number of products per row

functions.php

// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 3; // 3 products per row
	}
}

Hi,

I am unable to change the number of products per row using that code.I am using sommerce shop theme.
The items appear 4 in a row in 1st row then 1 on 2nd row , again 4 items on 3rd row and 1 on 4th ....
It looks awkward.However when i use a sidebar that code works , but i don't want a sidebar on my shop page.
Please help.

v2.1+
http://coenjacobs.me/changing-number-columns-woocommerce-2-1/

it helps for me reference link
@media screen and (min-width:1024px) {
.woocommerce ul.products li.product {
width: 21% !important;
margin: 2% !important;
clear: none !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) {
clear: both !important;
}
}

@media screen and (min-width: 768px) and (max-width: 980px) {
.woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last {
clear: right !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) {
clear: none !important;
}
}