nikfakel

Потому что figure - блочный элемент. Тег A оборачивает его целиком, то есть и поля, которые margin: auto, из-за чего растягивается на всю ширину. Можно сделать так:

.wrapper {
text-align: center;
}
figure.logo {
display: inline-block;
}

либо:

.wrapper a {display: block; 
  width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
  height: 60px;
}
.logo {
  background-image: url(/assets/img/logo.png);
  height: 60px;
  width: 100%;
}

Height сами смотрите куда нужно вставить, в зависимости от того, что у вас в figure.

На событие валидации поставьте проверку класса у input'a

$(validation)....... function(){
if($('input').hasClass('valid')){
 $("label[for='" + this.id + "']").addClass("label-valid");
}
if($('input').hasClass('invalid')){
 $("label[for='" + this.id + "']").addClass("label-invalid");
}
}

Для начала я бы определил границы применяемости: что, например, будет, если видео будет 1000. Значит сразу показываем только несколько, остальные доступны по ссылке. В таком случае можно вообще расположить 10 картинок, обозначающие видео, по кругу через position: absolute. Но, очевидно, для универа такое не подойдет.

Пусть тогда нам надо расположить от 6 до 20 картинок по кругу (меньше 6 - круг будет не очень-то круглый, больше 20 - картинки слишком мелкие). В таком случае просто рассчитываем через JS местоположение и указываем его через position:absolute.
Структура HTML:

<div id="wrap">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
</div>

CSS просто чтобы было наглядно сразу посмотреть:

#wrap {position: absolute; }
#wrap img {width: 30px; height: 30px; background:#333; position: absolute; }

и, собственно, сам скрипт на JS и jQuery:

var num = 20; // Число картинок
var wrap = 400; // Размер "холста" для расположения картинок
var radius = 200; // Радиус нашего круга

$(document).ready(function() {
  for (i=0;i<num; i++){
    var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
    var left = wrap + radius * Math.sin(f) + 'px';
    var top = wrap + radius * Math.cos(f) + 'px';
    $('#wrap img').eq(i).css({'top':top,'left':left}); // Устанавливаем значения каждой картинке
  }
});

Ну и вам, наверно, надо будет еще добавить функцию для определения числа картинок. Ну и при клике на картинку открывается видео (это уже как вы сами решите, можно и модальное окно).