0xD34F

Так?

Градиентом можно сделать.

задайте ему отрицательный z-index

В чем ошибка?

В том, что вы почему-то решили не разбираться, как именно работает используемый вами инструмент.

Поменяйте input и span местами - будет работать как вам нужно.

ховер на .th-search-box не срабатывает, почему?

Потому что никакого ховера у вас там нет, нечему срабатывать.

Я бы предположил, что

.th-icon-box:hover .th-search-box

стоит заменить на

.th-icon-box:hover + .th-search-box,
.th-search-box:hover

<div class="1">

Числа в качестве имён классов использовать не надо.

Убрать transition, добавить анимацию: animation: show 10s;.

Анимироваться будет прозрачность:

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  overflow: hidden;
}

Я не понимаю как можно увеличить плавно блок, чтобы расширялся равномерно со всех сторон и также чтобы менялась картинка на другую и плавно увеличивалась

Увеличение - с помощью scale, картинку показывать "плавно" можно с помощью opacity. Как-то так.

https://css-tricks.com/multi-line-padded-text/

Достаточно добавить :hover и самой кнопке тоже:

.btn:hover {
  display: block;
}

возможно ли нарисовать самого pacman-a только средствами CSS?

погуглил за вас

<div class="container">
  <div class="yellow"></div>
  <textarea></textarea>
</div>

.container {
  display: inline-flex;
  width: 200px;
  height: 400px;
  flex-direction: column;
  border: 10px solid red;
}

.yellow {
  background: yellow;
  flex-grow: 1;
}

textarea {
  background: #47f;
  line-height: 20px;
  resize: none;
}

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  const maxHeight = 300;
  const height = 20 * this.value.split('\n').length;
  this.style.height = `${Math.min(height, maxHeight)}px`;
});

textarea.dispatchEvent(new Event('input'));

В качестве ширины флекс-контейнера (570px) задаю сумму ширин флекс-элементов (390px + 180px).

Если сумма ширин элементов равна ширине контейнера - о каком выравнивании может идти речь? Есть выравнивание, нет его - внешне разницы не будет.

Предположу, что вам надо на самом деле выравнять контейнер по центру страницы - добавьте margin: 0 auto элементу .subscribe-form, например.

<div id="progressBar"></div>

<button>green</button>
<button>red</button>
<button>yellow</button>
<button>magenta</button>
<button>aqua</button>

let percent = 0;
const gradientParts = [];

$('button').click(function() {
  if (percent < 100) {
    const color = $(this).text();
    percent++;
    gradientParts.push(`${color} ${percent - 1}%`, `${color} ${percent}%`);
    const gradient = gradientParts.concat(`#435C91 ${percent}%`, '#435C91 100%');

    $('#progressBar').css({
      background: `linear-gradient(to right, ${gradient.join(', ')})`,
    });
  }
});

https://jsfiddle.net/2yqzgeLb/

Смена цвета при hover с transparent на... какой там вам надо. Типа так.

.aimg:nth-child(odd) {
  float: right;
}

.aimg:nth-child(even) {
  float: left;
}

Но ведь каждый .aimg лежит внутри .aboutus_item. Наверное, имелось в виду

.aboutus_item:nth-child(odd) .aimg {
  float: right;
}

.aboutus_item:nth-child(even) .aimg {
  float: left;
}

.navigation ul {
  margin: 0;
}

box-sizing