Невозможно динамически изменить ширину DIV относительно размера браузера и содержимого в CSS

У меня есть div, и я хочу, чтобы у него был определенный запас слева. Он будет содержать несколько изображений с 210x210 pixels. Я хочу, чтобы div изменил размер так, чтобы его правая сторона расширилась всего на пару пикселей, что я буду устанавливать в качестве поля тегов img. По какой-то причине div меня есть, продолжается до конца страницы.

Под вопросом div находится тот, у которого есть id="thumbnails, и он содержится в другом div с id="main". Пожалуйста, проверьте jsfiddle для всего кода. Но здесь соответствующая часть кода:

HTML:

<div id="main">
<div id="thumbnails">
    <img class="thumb" id="1" src="images/portfolio/lorem/thumbs/1.jpg">
    <img class="thumb" id="2" src="images/portfolio/lorem/thumbs/2.jpg">
    <img class="thumb" id="3" src="images/portfolio/lorem/thumbs/3.jpg">
    <img class="thumb" id="4" src="images/portfolio/lorem/thumbs/4.jpg">
</div>

CSS:

#main {
background-color: rgba(50,50,50,0.6);
width: 100%;
height: 100%;
overflow: hidden;
}

#thumbnails {
margin-left: 300px;
margin-top: 50px;
background: rgba(50,50,50,0.6);
}

Следует также отметить, что когда размер браузера невелик, я предпочитаю, чтобы изображения продолжались в следующей строке.