Роман

Чтобы позиционировать элемент, относительно родителя, ему нужно изменить контекст.
Для этого нужно, родителю, задать тип позиционирования отличный от static.

В данном случае, добавьте в код:

nav a {
  position: relative;
}
nav a:hover::after {
  left: 50%;
  tranform: translateX(-50%);
}

<h3 class="title">Title</h3>
<h3 class="title">Информация</h3>

.title {
	display: flex;
  justify-content: center;
  font-size: 40px;
	color: red;
	text-transform: uppercase;
	font-weight: 200;
}

.title:before, .title:after {
  flex-grow: 1;
	content: '';
	height: 2px;
  margin: .5em;
	background-color: red;
}

Различная "брэндовая" память нужна, прежде всего, для разгона. На обычной рабочей машине вполне достаточно простых Goodram, Hunix, Adata и т.п. Главное чтобы срок гарантии был от 60 месяцев.

По объему памяти, смотрите не продешевите:
По моему опыту, 16 Гб уже начинает не хватать. При том что в игрушки я не играю!
У вашей материнской платы, всего 2 слота под память! Купив сейчас 2x8 Гб и, впоследствии, ощутив недостаток этого объема вам придется снова покупать память но уже 2x16 Гб.

Box-ы, поместить в контейнер-обертку, с нужными стилями.

Для Flex:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.box { 
  flex-grow: 1;
  width: 50%;
  padding: 10px;
  overflow: auto;
}

Для Grid:

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.box {
  padding: 10px;
  overflow: auto;
}

У вас product__special находится в потоке. Естественно, если его не будет, то элементы ниже займут его место.
Чтобы этого не произошло, добавьте:

.item {
  position: relative;
  padding: 1rem;
}
.product-special {
  position: absolute;
  top: .5rem;
}

Уберите:

.product__image {
  margin-top: -27px;
}

Нужно! Это стандартная сетка bootstrap:
Сначала идет контейнер (.container), внутри него находятся строки (.row), а внутри строк находятся колонки (.col).
Если внутри колонки требуется создать свою сетку, то добавляете row и внутри него создаете колонки.

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
      </div>
    </div>
  </div>
</div>

Старая добрая "распорка"

form#eventsystem_authform::after {
  content: '';
  display: table;
  clear: both;

Хотя лучше бы отказаться от флоатов и использовать flex.

Менять стили нужно при наведении на сам рисунок, а не на отдельный его элемент.
Только используйте лучше классы, для внутренних элементов SVG, вместо ID.

Примерно так:

<svg id="icon_id">
    <rect class="style1" ... />
    <rect class="style2" ... />
</svg>

#icon_id:hover .style1 { fill: red; }
#icon_id:hover .style2 { fill: green; }

Посмотрите в настройках браузера:

Спец. возможности -> Навигация по страницам с помощью курсора

Если включено, то выключите.

У него TDP всего 65 Вт. Так что, дополнительное питание ему ни к чему. 8pin вполне достаточно.