Norwood

const keys = Object.keys(yourObj);

const randomNumber = Math.floor(Math.random() * keys.length);
const randomKey = keys[randomNumber];
const randomValue = yourObj[randomKey];

console.log(randomKey, randomValue)

ar10.filter(el => !isNaN(el)).forEach(n => ar10_res.push(n));

Имеет смысл почитать про box-sizing.
Дело в том, что 3х33.333% + 3х2х38 никак не влезает в 100%. Вот они и переносятся.
На большой ширине начинает помещаться просто за счет того, что вы ограничили ширину 322px.

Попробуйте загуглить: img и псевдоэлементы

Двигать карточки марджинами или транслейтом относительно середины ужасная затея, они пробьют экран по ширине в итоге на узких устройствах. Надо брать общий контейнер и просто в нем раздвигать их по сторонам
Картинку группируй с карточкой, карточке контейнер на всю ширину. Картинка статик, контейнер с карточкой - абсолют со смещением вверх.Чтоб карточки раздвинуть либо карточке margin-left: auto либо контейнеру flex и justify, для чередования псевдокласс nth-child
Типа такого

<section>
	<div class="container">
		<div class="group">
			<div class="image">
				<img src="" alt="">
			</div>
			<div class="card-container">
				<div class="card">
					<!--  -->
				</div>
			</div>
		</div>
		<div class="group">
			<div class="image">
				<img src="" alt="">
			</div>
			<div class="card-container">
				<div class="card">
					<!--  -->
				</div>
			</div>
		</div>
	</div>
</section>
<style>
	.image {
		width: 556px;
		height: 300px;
	}

	.image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.group {
		position: relative;
	}

	.card-container {
		position: absolute;
		top: -100px;
		left: 0;
		display: flex;
		justify-content: flex-end;
	}

	.card-container:nth-child(even) {
		justify-content: flex-start;
	}

	.card {
		/* сам) */
	}
</style>

По ховеру без js не получится . Что бы сделать по ховеру надо в один родит блок вложить и карточку и блок с описанием
Если такое сделать, то как-то сложно будет реализовать раскладку ту, что сделана сейчас
Если делать по клику, то это классические табы

Уберите dist из пути к файлу. Должно быть так assets/css/styles.min.css
В настройках browsersync указана папка сервера baseDir: "./dist/", то есть эта папка и есть localhost.
Выходя из этого вы пытаетесь найти в папке dist еще одну папку dist, а ее там нет.

ReactDOM.render(
  <React.StrictMode>
    {Array.from({length: 5}, () => <App />)}
  </React.StrictMode>,
  document.getElementById('root')
);

^_^

case "Down":
        circle.style.top = Math.min(circle.offsetTop + step, divSquare.clientWidth - circle.offsetWidth / 2) + 'px';
        break;
case "Right":
        circle.style.left = Math.min(circle.offsetLeft + step, divSquare.clientWidth - circle.offsetWidth / 2) + 'px';
        break;

Все дело в том, что вы зачем-то числу пытаетесь прибавить не число, а строку. Получается так: 1 + '1' = 11 (number + string = string), с вычитанием работает нормально: 1 - '1' = 0 (number - string = number)

const divSquare = document.querySelector('.square');
const circle = document.querySelector('.circle');
// divSquare.hidden = false;

document.querySelector('.nbt').onclick = () => {
  const inp1 = document.querySelector('.width').value;
  divSquare.style.border = "1px solid black";
  divSquare.style.width = `${inp1}px`;
  divSquare.style.height = `${inp1}px`;
  divSquare.style.position = 'relative';
}

document.querySelector('.btnz').onclick = () => {
  const inp3 = document.querySelector('.width1').value;
  circle.style.width = `${inp3}px`;
  circle.style.height = `${inp3}px`;
  circle.style.borderRadius = "100%";
  circle.style.background = "rgba(0, 0, 0, .3)";
  circle.style.position = 'absolute';
  circle.style.top = '50%';
  circle.style.left = '50%';
  circle.style.transform = 'translate(-50%, -50%)';
}

document.querySelector('.btnGroup').addEventListener('click', event => {
  let step = +document.querySelector('.width2').value;
  let action = event.target.innerText;
    switch (action) {
      case "Up":
        circle.style.top = circle.offsetTop - step + 'px';
        break;
      case "Left":
        circle.style.left = circle.offsetLeft - step + 'px';
        break;
      case "Down":
        circle.style.top = circle.offsetTop + step + 'px';
        break;
      case "Right":
        circle.style.left = circle.offsetLeft + step + 'px';
        break;
    }
});

Читайте офф мануал
https://www.jetbrains.com/help/webstorm/github.htm...

Вам нужен токен, сделать его нужно вот так
https://docs.github.com/en/free-pro-team@latest/gi...

Потому что у Вас блок else срабатывает на каждой итерации цикла
тык

Потому, что вы сравниваете введённое имя с каждым из массива и на каждой итерации если имя не совпало -- вывести сообщение.

Ну, например, я Брэд Питт. Я ввожу такой значит: 'Pitt'. В коде происходит следующее:
- 'Pitt' === 'Kutcher'?
- No. alert('No results found for your request')
- 'Pitt' === 'Pitt'?
- Yes. alert('с кучей неинтересной информации')

if (inp === "") {
  return false;
}

потому что в for (let key in a11) сначала получаете список элементов для обхода, а внутри цикла удаляете из объекта, но не из этого списка
как по мне логичнее всего удалять ключ ещё до начала цикла, типа такого:

let inp11 = document.querySelector('.i-11').value;
if (a11[inp11]) {
    delete a11[inp11]
}
for (let key in a11) {
    out = out + `${key} : ${a11[key]} <br>`;
}

значит у тебя какой-то из элементов по ширине длиннее, чем область экрана. Скорее всего его ширина задана статично (width: 900px например).

Попробуй по очереди элементам, либо секциям в инструментах разработчика позадавать overflow: hidden. Как только пропадет - ищи там элемент с большой шириной.

Вот, сделал без transform https://jsfiddle.net/gkapn8L1/1/ и все нормально работает. Старайтесь избегать transform по возможности. Там анимацию я сделал не такую же, как у вас, но суть вы поняли.

Почему не выставить громкость сразу после загрузки DOM в скрипте?