relows

const index = arr.findIndex(n => n.id === id);
if (index !== -1) {
  arr.splice(index, 1);
}

или, если нужен новый массив:

const newArr = arr.filter(n => n.id !== id);

Если же id имеют не уникальные значения, то создание нового массива остаётся без изменений, а модификация существующего может выглядеть так:

for (let i = arr.length; i--;) {
  if (arr[i].id === id) {
    for (let j = i; ++j < arr.length; arr[j - 1] = arr[j]) ;
    arr.pop();
  }
}

или так:

arr.reduceRight((_, n, i, a) => n.id === id && a.splice(i, 1), null);

или так:

arr.splice(0, arr.length, ...arr.filter(n => n.id !== id));

или так:

arr.length -= arr.reduce((acc, n, i, a) => (
  a[i - acc] = n,
  acc + (n.id === id)
), 0);

А Вы сами изобрели значение overflow: none?
Есть такое: overflow: hidden.

Почему текст в кнопке переходит на вторую строку?

много факторов может быть, но обобщёно, это из-за того что, нет ширины (width), поэтому блок стремится к наименьшему размеру, а наименьший размер в вашем блоке устанавливается размером слова "ПРОЕКТЕ"

установите width или white-space: nowrap

Нет, нельзя. Так и задумано.

Если aside__menu__item - это ul:

$(".aside__menu__item > li").click(function(){
  alert($(this).index());
})

Через :hover можно достучаться только до братьев или дочерних.

Правильно будет так.

.test:hover + .test2 {
color: yellow;
}

.test2{
    background-color: black;
    color: #fff;
}
.test:hover + .test2{
    background-color: blue;
}

https://jsfiddle.net/8pmxncw4/2/

Имеет смысл инлайнить критический css для отображения первого экрана (верхняя часть сайта) для пользователя. Эта методика является также официальной рекомендацией https://developers.google.com/speed/pagespeed/insights/ .
Основной же css должен подгружаться асинхронно, например используя библиотеку https://github.com/filamentgroup/loadCSS

Первому элементу задай z-index: 1;
Второму элементу задай z-index: 999;

<родитель>
  <потомок>
     какая то инфа
  </потомок>
  <скрытый потомок>
     какая то инфа
 </скрытый потомок>
</родитель>

скрытый потомок {
  opacity:0;
  visibility:hidden;
  transform:translateX(-100%);
  transition:0.34s
}
родитель:hover скрытый потомок {
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

Вопрос на 10 из 10 . Ни кода, ни ясности требований....
Что "все сбивается"?
Какую версию Bootstrap используете? Какие префиксы класов?
Да и в конце концов, может все атки дело в масштабируемости отображения - при открытии в окне, а не на полный экран?

Типичная задача.

Для родителя:
display: flex;
flex-flow: column wrap; (чтобы в колонку)
justify-content: space-between; (распределяет дочерние элементы равномерно в рамках родительского блока)

А для детей нужно подбирать параметры свойств flex-grow, flex-shrink и flex-basis (например, flex: 1 0;), чтобы нужные элементы росли по высоте, заполняя пространство, а нижний элемент с ценой — нет.

Пришлите код, иначе будет сложно сказать, что куда подставить. Возможно, нужно будет разметку менять. Скорее всего, flexbox так же будет необходим на всём блоке, чтобы колонки с текстом и фото были равны по высоте.

https://jsfiddle.net/w1pzu5rh/1/.
Зоны выделил разными цветами. Верстка на коленке, но алгоритм будет понятен. Под реальности проекта нужно, конечно, подстроить (ту же минимальную высоту поставить блоку, если нужно, реальные размеры, верстку и т. п.).

прошу отметочку ))

<div class="container">

</div>