holfza

c2n.me/3pnJE0v запятых не хватает

jsfiddle.net/oekq71yg/1

codepen.io/anon/pen/RWMNGJ

Очепятка: c2n.me/3pjALTr

jsfiddle.net/w3mLkouh/1

Все работает:
clip2net.com/s/3p0Pd9c (архив)
c2n.me/3p0Pvrw

https://jsfiddle.net/mrqkd33w/2/

Например можно так

$('label').on('click', function(){
    if($(this).children('input').prop('checked')){
        $(this).addClass('checked');
    }
});

CSS:
label.checked:before {...}

У вас ширина рассчитывается: width + padding-left + padding-right.
Поэтому:
Вариант 1: сдвигать влево на
margin-left: -304px;
Вариант 2: добавить к input-wrapper

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Когда попап открыт - добавляйте к body
overflow: hidden;

Один из...
Еще

jsfiddle.net/qrjgbLkh/3

background-image: url(...)

<div class="box">
	<div id="test">
		<div></div>
	</div>
</div>

В вашем примере, при наведении на .box у блока #test станет ширина 200px.
А если так:
.box div:hover
То стиль унаследуется и у блока div, который находится в блоке #test.
denweb.ru/css/selektory-css.html