Spacing between superposed divs, without affecting width

I have been trying recently to make a slide of divs, using a script named Owl-Carousel, where divs are spaced by 10 px each so dragging looks nice.

I made the whole code for showing purpose:http://codepen.io/anon/pen/VLZmWd

I tried modifying the margins without success.

The CSS is as follow:

.generic { // header on top of slide, must have wrapper width  background-color:red;  height: 30px;  text-align:center;}.item { // item (slide) inside the owl carousel, must have wrapper width  height: 300px;  background-color: #7FFFD4;  //margin-right:10px; // gives the spacing between slides, but works so bad}#wrapper { // wraps carousel and elements with generic class  margin:0px auto;  width:720px;  height: auto;}

How can I space slides between each other by 10px while keeping red/green areas same width and .generic class untouched.

The reason I want the class ".generic" to be unchanged is mainly the way I've sat up my code, so that the CSS is easily modifiable for widths: I have a lot of different classes/elements which are supposed to take the wrapper width, I wish not to have to set width for each of them or set margins, for code manageability.

EDIT: To make it clear, when using mouse dragging on the carousel, my objective is to see 10px of white between each slide green slide (which isn't the case in the codepen) while keeping the green area width the same as the red area width.

Thanks