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

Смотрите, в вашей песочнице всё работает
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

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

typ6alet, какая разница Вордпресс это или нет? Меняйте CSS как вам нужно.

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

absolute
transform
margin

Резиновая верстка - как сделать так, чтобы на 1400px сайт выглядил так же, как и на 1920px?

Использовать vw.
Можно вместе с min, max или clamp

Как перенести блок?

Нормально: на гридах. И да, с @media.

Не очень нормально:
- float
- absolute
- flex + js

- может с использованием сетки (24 колонки)?

Неожиданная идея )))
А если 24 не поможет, то 512?

Почему у меня не добавляется класс, че я не делаю правильно?

Может быть вы просто будете использовать CSS и псевдокласс :focus-within?
Жить будет заметно проще.

Если это, конечно, не тренировочное задание.

--
А так, судя по коду должно всё нормально срабатывать. Правда убираться не будет.
Выложите пример на codepen.io

Как сделать overflow hidden для body по нажатию?

Сделать класс с overflow и его toggle.

p.s. кнопки это тег <button>, а не <div>

p.p.s. следующим будет вопрос "не работает overflow на body для мобилок" -> гуглится.

Как убрать автоматическое увеличение высоты ROW элемента в grid относительно другого row?

1. Открывать абсолютом поверх следующих пунктов
2. Не использовать гриды
3. JS
4. Изменить разметку (JS или ручками)

Вообще, за это отвечает align-items, но в этом случае не поможет, потому что будет пустое место, вместо растяжения, т.е. шило на мыло.

Как поменять картинки при клике на кнопку?

https://learn.javascript.ru/dom-navigation#sosedi-...

Тег < p > и < span >. Есть разница?

Кирилл Гусарев, читать про параграфы и что под этим словом понимается в верстке

Как задавать значения width и height изображениям при адаптивной верстке?

https://caniuse.com/?search=aspect-ratio
И это заодно https://developer.mozilla.org/ru/docs/Web/CSS/obje... вместо абсолютов.
Гриды, кстати, тоже уже выдуманы.

Но в вопросе-то нужно сохранение родных пропорций, а не та история, которую рассказываете.

Как задавать значения width и height изображениям при адаптивной верстке?

Вячеслав Яшников, что именно вас смущает в

Потом переопределяются стилями.

Высоту на просто auto

Как задавать значения width и height изображениям при адаптивной верстке?

При верстке mobile-first ставятся мобильные размеры картинки.
При desktop-first, соответственно.
В рекомендациях гугла видела фразу о том, что достаточно просто правильных пропорций в атрибутах.
Потом переопределяются стилями.
Также атрибуты width и height задаются тегам source при использовании picture.

Тег < p > и < span >. Есть разница?

Кирилл Гусарев,
Спека:
https://html.spec.whatwg.org/multipage/dom.html#pa...
https://html.spec.whatwg.org/multipage/grouping-co...

Тег < p > и < span >. Есть разница?

PolarOne, какой тег использовать зависит не от их визуальной разницы или того какую ширину они занимают по умолчанию.
А от смыслового назначения тега.

И именно это отвечает на вопрос автора, почему пишут p, а потом меняют ему display