Artetics Sexy Lightbox issue - css

Question

The project is located at here.
I am creating a website for a company which specializes in comics. Nothing to advanced just some lightboxes with slides in. This I have managed to do. The website uses Joomla 3.x and the Purity-iii template.
My issue is this. All the lightboxes want to appear on a new line rather than side by side. I checked the developers website as it is a paid module. They recommended inserting the following code to have the lightboxes appearing horizontally as opposed to vertically.
.artsexylightboxpreview {
display: inline-block !important;
}
Nothing happened. I inspected the element in chrome and the .css file in use is correct. I have edited line 107 also as inspection tells me this is the section of the .css which is controlling the box. Still nothing happens. I removed the margin as it conflicted with the display tag. The full .css file is below. Please let me know if you need anything else to help with solving this for me.
.artsexylightboxpreview {
display: inline-block !important;
}
#SLB-Wrapper {
margin:0.5em 0;
margin:auto;
font-family:Verdana;
text-align: left;
position: absolute;
display: none;
}
#SLB-Wrapper #SLB-Background{
position: absolute;
left:7px;
top:7px;
float:left;
}
#SLB-Wrapper #SLB-Top {
background:transparent no-repeat scroll 100% 0;
height:28px;
margin:0 0 0 18px;
}
#SLB-Wrapper #SLB-Top img {
float:right;
border:0px;
margin:6px 10px;
}
#SLB-Wrapper #SLB-Top div {
background:transparent no-repeat scroll 0 0;
font-size:0;
height:28px;
left:-18px;
line-height:0;
position:relative;
width:18px;
}
#SLB-Wrapper #SLB-Bottom {
background:transparent no-repeat scroll 0 43%;
height:20px;
margin:0 18px 0 0;
}
#SLB-Wrapper #SLB-Bottom #SLB-BottomRight {
background:transparent no-repeat scroll 100% 43%;
font-size:0;
height:20px;
right:-18px;
line-height:0;
position:relative;
width:100%;
float:right;
}
#SLB-Wrapper #SLB-Bottom.SLB-bbnav, #SLB-Wrapper #SLB-Bottom.SLB-bbnav #SLB-BottomRight{
height:52px;
}
#SLB-Wrapper #SLB-Bottom.SLB-bbnav {
background-position:0 100%;
}
#SLB-Wrapper #SLB-Bottom.SLB-bbnav #SLB-BottomRight{
background-position:100% 100%;
}
#SLB-Wrapper #SLB-Contenido {
border-left: 7px solid #000;
border-right: 7px solid #000;
}
#SLB-Wrapper #SLB-Bottom #SLB-Navegador{
font-size: 11px;
color: #fff;
height:30px;
border-left:0px;
border-right:0px;
padding:10px 0px;
margin:0;
line-height:11px;
float:left;
width:100%;
}
#SLB-Wrapper #SLB-Navegador img{
border:0px;
}
#SLB-Wrapper #SLB-Navegador strong{
display: block;
}
#SLB-Wrapper #SLB-Bottom #SLB-Navegador img.btLeft{
float: left;
margin: 0 10px 0 0;
}
#SLB-Wrapper #SLB-Bottom #SLB-Navegador img.btRight{
float: right;
margin: 0 0 0 10px;
position:relative;
right:17px;
}
.artsexylightbox {
border: 2px solid #EEEEEE;
display: inline-block !important;
}
.artsexylightbox_singleimage {
cursor:pointer;
border: 2px solid #EEEEEE;
display: inline-block !important;
}
.artsexylightbox_singletext {
cursor:pointer;
}
.artsexylightbox_container {
width: 100%;
}
.artsexylightboxlink {
margin-right: 10px;
}
.asl_next {
background: url(../images/next.png) no-repeat 50% 50%;
float: left;
width: 32px;
height: 32px;
cursor: pointer;
vertical-align: middle;
clear:right;
}
.asl_prev {
background:url(../images/previous.png) no-repeat 50% 50%;
float: left;
width: 32px;
height: 32px;
cursor: pointer;
vertical-align: middle;
clear:both;
}
.asl_carousel {
float: left;
}
.asl_carousel li {
background-image: none !important;
}
.asl_caption {
text-align:center;
}
.asl_image_caption {
//float:left;
display:inline-block;
}
.asl_folder {
margin: 5px;
float: left;
text-align: center !important;
}
.asl_folder div {
text-align: center !important;
}
.sexylightbox_print {
cursor: pointer;
}

Answer 1

The recommended change looks like it is being applied correctly but does not seem to make any difference.
Using a float may be more appropriate:
.artsexylightboxpreview {
float: left;
}