How to make my 4 products on Homefeatured block centered all the time?

[generalexperts]

My 4 products on my homepage are shown using the Homefeatured module. When I expand the browser the products also move. I'd like for them to stay stationary. I'd also like them the same size as this site. Also I'd like it to all be the same for all browsers. Can anyone help? Thank you!!!

 

Example of the size and how they remain stationary: http://tympanus.net/Tutorials/OriginalHoverEffects/

 

My site is: http://tinyurl.com/n5pfy52

[vekia]

you use media queries there, remove them if you want to leave products the same also on small device sizes

@media only screen and (min-width:744px) and (max-width:999px){#featured-products_block_center{width:79%;}
#featured-products_block_center li{width: 120px;
height: 220px;
margin:15px 8px 1px 10px;
padding: 1px 7px}
img.pring{width:100px;height:100px;}
#featured-products_block_center p.title_block{text-align:center;font-size:14px;}
#featured-products_block_center li .product_desc a ,#featured-products_block_center li:hover .product_desc a{font-size:10px;}
#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{padding:2px;margin-top: -19px;
margin-left: 46px;font-size:11px;}
#featured-products_block_center li span.price{font-size:11px;}
}
@media only screen and (min-width:488px) and (max-width:773px){#featured-products_block_center{width:55%;}
#featured-products_block_center li{width: 90px;
height: 200px;
margin:21px 8px 1px 14px;
padding: 1px 7px}
img.pring{width:80px;height:80px;}
#featured-products_block_center li span.price{font-size:9px;}
#featured-products_block_center p.title_block{text-align:center;font-size:12px;}
#featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:10px;}
#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{font-size:8px;padding:1px;margin-top: -19px;
margin-left: 39px;}
}
@media only screen and (max-width:487px) and (min-width:0px){#featured-products_block_center{width:30%; padding: 5px 0px 3px 0px;}
#featured-products_block_center li{width: 80px;
height: 180px;
margin: 22px 7px 1px 30px;
padding: 1px 7px}
img.pring{width:74px;height:74px;}
#featured-products_block_center p.title_block{text-align:center;font-size:10px;}
#featured-products_block_center li .product_desc a,#featured-products_block_center li:hover .product_desc a{font-size:9px;}
#featured-products_block_center li .ajax_add_to_cart_button,#featured-products_block_center li.last_item_of_line .ajax_add_to_cart_button{margin-top: -18px;
margin-left: 29px;padding:0px;font-size:8px;}
#featured-products_block_center li span.price{letter-spacing:0px;font-size:9px;margin-left:0px;}
#featured-products_block_center li.last_item_of_line{display:none;}
}

it's a part of your module homefeatured.css styles file

[generalexperts]

I removed them and it didn't work. The 4 homefeatured products still move around when resizing the browser window. If you look at http://tympanus.net/Tutorials/OriginalHoverEffects/ with any browser and drag the size to smaller and larger you will see the 4 blocks never move and never change size. Please let me know if you know what else I can do.

 

Thank you!