Как сделать чтобы при смене with изображение съезжалось к центру?

задать background-position: center или top center или другое подходящее значение

Как избавиться от отступов справа?

Так устроен текст в HTML.

Как правильно сделать адаптивное nav-меню?

Лучше избегать дублирования контента, т.е. первый вариант.

Как сделать свободное пространство между элементами?

gameWinner, да-да, отредактируйте stroke-dasharray и stroke-dashoffset так, как вам нужно.

Как сделать свободное пространство между элементами?

Сейчас circle просто лежат друг на друге.
Поэтому не очень ясно, что именно вам нужно, но, возможно помогут stroke-dasharray и stroke-dashoffset

Как выровнять карточки flexbox?

.inner {
  display: flex;
  min-height: 320px;
- align-items: flex-end;
}
.card {
  background-image: url(https://img5.goodfon.ru/wallpaper/nbig/3/73/abstraktsiia-antisfera-vodovorot-krasok-kartinka-chernyi-fon.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
- padding: 140px 30px 20px;
+ padding: 20px 30px 20px;
  max-width: 25%;
  margin-right: 10px;
  
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
}

Input внутри div?

Если вы сказали инпуту, что он должен занимать всю ширину div (width: 100%), то проблемы могут быть из-за неподходящего box-sizing.

Так всё должно прекрасно работать

<div>
  <input type="text">
</div>

div {
  width: 50vw;
  border: 2px solid red;
  box-sizing: border-box;
}

input {
  width: 100%;
  box-sizing: border-box;
}

Если нет, то выкладывайте свою проблему на codepen.io

Как бы вы переместили контент из одной колонки в другую?

Гриды, флоаты, абсолют.
Флексы тут мало чем помогут. Разве что высота будет фиксированной. Или могут быть использованы для одной из раскладок.

Почему slick slider ломает FlexBox и CSS Grid?

Если вы пытаетесь флексом или гридом выставить внутренности слика, то не выйдет, он не умеет.
А ломает внешнюю сетку, то это странно.

Ваш код выложенный простыней ничем не поможет, нужна песочница на codepen.io с воспроизводимой проблемой.

Как убрать скролл при переключении аккордеона?

marcys, ну и славно

Как убрать скролл при переключении аккордеона?

https://developer.mozilla.org/en-US/docs/Web/API/E...

Как сменить цвет элемента навигации при прокрутке страницы через JS?

lex0rrd,

Их код не работает даже у них,

Оч странно.

Может не работать или работать не так, если вы раскрыли песочницу на всю страницу большого моника и все секции или сразу несколько попали в видимость.
Но если проявить смекалку и ужать страницу так, чтобы секции были повыше или добавить еще текста, то видно, что всё прекрасненько работает.

Как сменить цвет элемента навигации при прокрутке страницы через JS?

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

Как сменить цвет элемента навигации при прокрутке страницы через JS?

Это чтоль
https://habr.com/ru/company/timeweb/blog/574972/
https://habr.com/ru/post/494670/

Как правильно сделать мобильную версию?

DmitriyLeo, забыла уже, что там в jq,
hasClass или типа того.

Но, по-моему, вам нужно не проверять, а при клике добавлять active ссылке и всё остальное.

Или вы в localStorage записываете активную ссылку?
С другой стороны, даже если записываете, то меню в начале всё равно же закрыто, так что я не поняла смысла в проверке есть active или нет.

Как правильно сделать мобильную версию?

DmitriyLeo,

так как это может сработать и на пк версии. Или я ошибаюсь?

Если не напишете условие, то, конечно, будет.
Но вы же напишете..

Если скрипт выключает действия у всех ссылок, то допустим кнопка открывающая модальное окно - тоже вырубится?

Вообще, ссылки и кнопки это разные элементы и, наверное, у них разные классы.
И у кнопки с типом button по умолчанию вообще нет никаких действий, там нечего вырубать.
Вы же можете написать селектор так, чтобы выбрались только нужные элементы.

Натыкался на такое решение

Знать бы, какое это имеет отношение к вашей проблеме...
Этот скрипт меняет классы у body, тыкнутого элемента, навигации и ещё какой-то странно сделанной навигации (видимо, в коде дублируется меню для мобилок и десктопов).

Вам нужно при клике на ссылку убрать её действие по умолчанию и добавить две функции.
На переход по указанному в href урлу.
На закрытие меню.

https://yandex.ru/search/?clid=9582&text=javascrip...

Как правильно сделать мобильную версию?

DmitriyLeo,

нельзя ссылкам убирать действия

По какой причине?

Как сделать такое расположение элементов?

Зачем дубль?
https://qna.habr.com/q/1223200

Как расположить элементы влево?

Если так пойдет, то заведу горячие кнопки на вставку этой ссылки: https://qna.habr.com/q/1088262

Как правильно сделать мобильную версию?

DmitriyLeo, ссылкам можно убрать действие по умолчанию https://developer.mozilla.org/en-US/docs/Web/API/E... и потом сотворить функцию с двумя действиями: закрыть меню и перейти по ссылке.