Woocommerce CSS probleem

Ik heb een probleem met WooCommerce.
Ik maak nu zelf een theme voor mezelf alleen ik heb een probleem, want het 5e product komt onder het 3e product als er 4 producten naast elkaar staan.
Weet iemand hoe je ervoor zorgt dat het 5e product onder het 1e product komt?
Hier is de css code:

#shop .page-title {
font-family: Verdana;
}
#shop .woocommerce-result-count {
font-family: Verdana;
}
#shop .woocommerce-ordering {
font-family: Verdana;
margin-bottom: 50px;
}
#shop .products {
margin-top: 30px;
padding: 0;
}
#shop .products li.product{
display: block;
float: left;
width: 17%;
list-style: none;
margin-right: 7.5%;
margin-top: 20px;
position: relative;
}

#shop .products li a {
text-decoration: none;
margin-bottom: 20px;
margin-top: -100px;
}
#shop .products li a img {
width: 100%;
display: block;
height: 200px;
}
#shop .products li a h3 {
margin-top: 20px;
color: #fff;
text-align: center;
}
#shop .products .onsale {
margin-top: -30px;
background: #492917;
color: #fff;
padding: 5px;
border-radius: 3px;
font-family: Verdana;
color: url(images/cool.png);
font-weight: bold;
display: block;
width: 20%;
}
#shop .products li .star-rating {
display: none;
}
#shop  .products img {
padding-left: auto;
padding-right: auto;
}
#shop .products li .price {
color: #fff;
font-family: Verdana;
float: none;
padding-bottom: 20px;
text-align: center;
display: block;
}
#shop .products li .button {
margin-top: 10px;
margin-left: 25%;
background: #492917;
color: #fff;
padding: 5px;
border-radius: 3px;
font-family: Verdana;
color: url(images/cool.png);
font-weight: bold;
}