1. У вас сохраняется margin-left на блоке, к примеру: 1000px. При след. нажатии у вас вычисляется новое рандомное значение и происходит анимация от старого значения (1000px) к новому, которое может быть как меньше предыдущего значения, так и больше. Поэтому у вас едет рулетка, то в одну строну, то в другую.
2. Пробелы у вас, потому что вы используете display: inline-block;, лучше прочтите про это сами (между элементами есть пробельные символы, в вашем случае enter). Есть несколько решений (flex, font-size: 0; удаление пробельных символов и т.д.). Ваши пробелы не пропадают, они как были у первых 4-х карточек, так и остались. Вы скриптом клонируете их в рулетке, и уже при клонировании между ними не добавляются пробельные символы. Но при этом у первых 4-х эти символы остаются.
Простой
