Need Space in between Product Listing

Hello,
Need Help with a site I am creating.
I started with classic template and revised it, so no fancy templates used.

Here's the situation:

This is my Products Listing Page:

But I want it to look like this picture below with the space in between each product.

I've tried padding the productListing-data but all it does is give space but not the separate boxes.

This is my current css on productListing:
.productListing-data {
background-color: transparent;
background-image: url(../images/repeater.png);
background-repeat:repeat;
border-top: 1px solid #222222;
border-bottom: 1px solid #222222;
padding-top: 15px;
padding-bottom: 35px;
padding-right: 15px;
margin-right:1.5em;

Does anyone know a way to get the separate boxes or a space to look like the second picture.

Thank you in advance for your help. In addition, this is on my localhost so I can't give you a link to view the site... as of yet:blush:

The product listing display is built with tables - I do not think it can be done, I may be wrong.

You could use:

Column Layout Grid For Product Listing

change to "1" product per row, of course you would have to alter the css to get the same look.