Антон Спирин

Потому что bootstrap .row имеет правило display: flex и свойство float дочерних элементов игнорируется.
Используйте класс-утилиту .justify-content-end:
<div class="row justify-content-end"></div>

Ну и изучайте верстку и возможности инструментов, которые используете.

Варианты:
1. Определять user agent и в зависимости от него рендерить нужный html.
2. Использовать общий класс и медиазапрос:

.some-icon {}

@media screen and (min-width: 600px) {
  .some-icon {}
}

3. Использовать js костыль. Самый плохой вариант.

Как правильно верстают контейнер для контента:

.container {
  width: calc(100% - 32px);  // отступ по 16px в случае если страница <= 1024px
  max-width: 1024px;  // размер для примера
  margin: 0 auto;
}

max-width можно задать 100% и напрямую задать padding, само собой к ширине + 32px

.container {
  width: 100%;
  max-width: 1056px;
  margin: 0 auto;
  padding: 0 16px;
}

shape-outside

can-i-use

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url(roboto100Url);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    src: url(roboto200Url);
}

/* ... */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url(roboto900Url);
}

Псевдоэлемент :after или :before с абсолютным позиционированием. У самой ссылки должно быть position: relative;

Так же динамический фон с постоянно меняющимся фоном и изображением.

javascript. Смотрите какие стили и как меняются на странице после ваших действий.

Что тут используется для прелоадера

<div class="progressbar" style="z-index: 2; opacity: 1;">
  <span id="progressbar" style=""></span>
</div>

и как они сделали такой фон? Наложили цветное изображение на фон?

<div class="projects__images js-projects--images" style="opacity: 1;">
  <div class="projects__image desaturate js-projects--image" style="z-index: 2; opacity: 0; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/180g/header.jpg&quot;);"></div>
  <div class="projects__image desaturate js-projects--image current" style="z-index: 1; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/xme-company/header.jpg&quot;); opacity: 1;"></div>
</div>

Учитесь пользоваться панелью разработчика и анализировать код самостоятельно. Своим вопросом, вы просите сделать это за вас.

1. Прямоугольный элемент для решения этой задачи не подойдет. Треугольники через CSS
2. Используйте псевдоэлемент :before цвета тени и разместите его под :after со смещением вверх.

Последний раз решал подобную задачу так:

&:before {
    content: " ";
    position: absolute;
    top: -6px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    z-index: 1;
  }
  
  &:after {
    content: " ";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, 0.25);
  }

Тут :before это белый треугольник, а :after выполняет роль тени.

Хорошо изучите спецификацию Flexbox и подобных вопросов у вас не будет возникать никогда.
Простой пример

Если один всегда под другим, то следует положить их в один фиксированный контейнер, а сами сделать в зависимости от задачи статичными, абсолютными или относительными. Это же очевидно.

background-image
Внимательно почитайте пункт синтаксис.
Так же почитайте про:
background
background-position
background-repeat
background-size

flex-grow - это не размер. это свойство определяет, какую часть свободного пространства может занять контейнер, в соотношении с другими контейнерами.
На скриншоте видно, что свободного пространства элемент забирает пропорционально больше.
Перенос будет только тогда, когда элементы перестанут умещаться в строку. В вашем же случае, остается свободное пространство, которое распределяется между блоками.

На сколько вырастет пятый блок при заданных ему значениях

grow = whiteSpace / (4 * 1 + 1 * 5) * 5;

где whiteSpace - свободное пространство, не занятое элементами.

Советую получше изучить спецификацию. Хороший ее разбор на примерах вы можете найти в книге Новая Большая Книга CSS

Используйте opacity, вместо display.

Например так.

Что за отступы display: inline-block?

Тыц

как по другому расположить элементы друг за другом горизонтально ?

Flexbox

Можно использовать vw, vh, vmax или vmin
Пример с vw
Пример c vmin
Единицы измерения vh, vw, vmin, vmax

Это сделано не с целью "зашифровать", а для изоляции стилей и отказа от селекторов в исходном коде, как необязательной сущности в компонентной архитектуре. Данный сайт написан на react, с использованием библиотеки styled-components

Два инпута. Первый программируете, чтобы при определенной длине значения перекидывал фокус на второй.
Второй, чтобы при нулевой длине перекидывал фокус на первый. Маску еще можно добавить.

Простой пример.