CSS Strange Behaviour

Hi.

I am trying to increase the size of my border around my thumbnails from 1px to 3px. When I do this the thumbs drop onto a new line. Not sure why. The container is just set at 100%. And it can expand cause it starts a new line lol

I can't understand it.

Here is my page.

http://www.ccmediaservices.co.uk/pro...tment-to-rent/

It is the thumbnails underneath the slider I'm talking about. I need the border off the selected thumb to be more prominent so users can see where they are at, at a glance. If I increase it from 1px to 2px or 3px it drops to a new line :(

I'm sure this isn't as hard as it seems but I've been on the computer working for about 8 hours today and I can't figure this one out so any fresh individual out there please help me!

The container containing the thumbnails has a set width:

<div class="rsThumbsContainer" style="-webkit-transition: -webkit-transform 0ms; -webkit-transform: translate3d(200px, 0px, 0px); width: 204px;"><div style="margin-right:4px;" class="rsNavItem rsThumb rsNavSelected"><img src="http://www.ccmediaservices.co.uk/wp-content/uploads/2013/02/leftbank1-96x72.jpg"></div><div style="margin-right:4px;" class="rsNavItem rsThumb"><img src="http://www.ccmediaservices.co.uk/wp-content/uploads/2013/02/leftbank2-96x72.jpg"></div></div>

I'm guessing this is set with JavaScript, so you may have to override it with CSS !important:

.rsThumbsContainer {width: 208px !important;}

Cool.

Thanks for the reply.

Of course! I was increaseing the border thinking about the fact it was increasing the height, I should have realised it was increasing the width! Damm!!

You see it is responsive so if I make the browser narrower it adjusts correctly. Maybe instead of a pixel value I should set the width to 100%?