Почему код в CODEPEN работает а в браузере, при верстке, не работает?

DggMMmmm, Судя по предыдущему вопросу, в песочнице подключена JQ, а у вас на сайте нет.

А так да, смотреть dev tools в браузере, там пишут ошибки.

Почему контейнер игнорирует медиа-запросы?

1. Нужно проверять порядок свойств в коде
2. Правильность написания селекторов

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

Как правильно настроить node (nvm) в webstorm?

Можно заменить nvm на Volta

Как можно выбрать css классы который не используются на html странице?

Анатолий, ссылка на яндекс выше

Как можно выбрать css классы который не используются на html странице?

Анатолий,

вопрос только в поиске на чистом html и css

что??
Таких возможностей ни у того ни у другого нет.

Как можно выбрать css классы который не используются на html странице?

как-то так и ничего нового.
И если класс появляется позже из js, то стерев его вы получите ерунду.

Почему не работает float?

Mercury Effirium, да всё работает там https://codepen.io/AnnaSummer/pen/ExdZeMx

Другое дело, что очень вероятно (я бы сказала, процентов на 98), что вам и не флоат нужен.
И тогда нужно изучать гриды и флексы.

Почему не меняется цвет обводки в svg?

vitalygeg,
stroke у вас просто переопределяется на последний.
Вы же там по три раза задаете стили одному и тому же селектору. Срабатывает последний.

И еще они почему-то тут не в один ряд

Потому что по умолчанию блочные элементы становятся в столбик. Вероятно, в том месте откуда вы это вытащили был родитель флексом или гридом.

Почему не меняется цвет обводки в svg?

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

Почему не меняется цвет обводки в svg?

Вашего кода недостаточно для точного определения проблемы.

Но обычно дело в том, что атрибуты stroke, fill и т.д. присутствуют в самой svg.
Их там либо не должно быть либо вариант с currentColor.

Почему не добавляется класс? Где ошибка?

DggMMmmm, о, ура, отлично!

Почему не добавляется класс? Где ошибка?

DggMMmmm, мой ответ по ссылке выше начинается со слов о том, что в инпуте забыл атрибут placeholder.
А он должен быть, чтобы работал :placeholder-shown. Хотя бы с неразрывным пробелом внутри.
А ещё лучше с нормальным текстом, просто прозрачным.

Почему не работает команда npm start?

Node.js установлен?

Почему не добавляется класс? Где ошибка?

DggMMmmm, я в прошлый раз писала вам про псевдокласс :focus-within, который заменит вам этот js. И вы вроде согласились.
Поэтому, чтобы как-то нормально вам помогать, нужно понимать чем решение на css не подходит.

Почему не добавляется класс? Где ошибка?

Смотрите, в вашей песочнице всё работает
https://codepen.io/AnnaSummer/pen/WNaRXgR
Я лишь добавила обводку, чтобы это было очевидно.

А есть какое-то объяснение, зачем всё таки вы это делаете на js, а не используете css?
Вам же что-то типа этого нужно https://qna.habr.com/q/1272730#answer_2319398?

Как сделать отзывчиво-адаптивную вёрстку?

CyberStoic, по-моему, статьи про гриды и флексы есть на каждом более или менее крупном ресурсе про верстку.
Флексы:
https://yoksel.github.io/flex-cheatsheet/
css.yoksel.ru/flexbox
https://tproger.ru/translations/how-css-flexbox-works/
html5book.ru/css3-flexbox
Гриды:
https://yoksel.github.io/grid-cheatsheet/
https://css-live.ru/css/bolshaya-statya-pro-gridy-...
и т.д.

Игра по флексам https://flexboxfroggy.com/#ru
По гридам https://cssgridgarden.com/#ru

хочу понять реализацию без фреймворков и готовых сеток

Ну вот, изучайте возможности флексов и гридов и пишите именно те стили, которые нужны для каждого конкретного случая. Пробуйте разные варианты, смотрите какой оптимальнее (меньше кода или легче управляется или по какому-то ещё параметру).

Как сделать отзывчиво-адаптивную вёрстку?

В примере просто меняется ширина дочерних элементов на разных вьюпортах.

Можно сделать на гридах в одну строчку используя repeat и minmax.

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

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

Обычно в таких макетах две проблемы:
- сам дизайн не очень готовый к такому поведению
- непонимание геометрии верстальщиком/дизайнером/заказчиком

Как сделать такую точке перед текстом в CSS с помощью after/before?

Прямо так и сделать, писать подряд что вам нужно, скругление, зелененький и т.д.

::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.8em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: green;
}

Как залить изменения в определеную папку на GitHub?

В какой папке были изменения в такую и зальются.

Сделать логотип выходящий за пределы header?

typ6alet,

.site-branding a.brand img.svg-logo-image {
width: 264px;
position: absolute;
}

1. Это ужасный селектор.
2. Вы так вынете картинку из ссылки. А подвинуть, наверное, надо всю конструкцию целиком.
.brand {абсолют и т.д.} или .site-branding - мы не знаем что в разметке.
3. Забыли координаты для позиционирования.
4. В media зачем-то переопределяете абсолют на абсолют
5. Если вы пишете сначала madia, а потом основные свойства, то они и переопределяют то, что выше.
6. Зачем два селектора для, по всей видимости, одного элемента .site-branding a.brand img.svg-logo-image и .site-branding a.brand img