Как сделать рабочий запрет переноса строки в table?

Валерий Суворов, td

Новичек и жестко нагородил с первой секцией. При уменьшении разрешения съезжает фон в левую сторону. Можно ли исправить не переписывая все?

Евгений Полинов, какой-то легкий бред.

Хорошо бы писать правильно слова container, title и другие, если собираетесь хоть кому-то показывать свой код.
Обычно в редакторе кода есть настройка отвечающая за проверку орфографии.

Как сделать рабочий запрет переноса строки в table?

Вы пытаетесь задать это строке..
Нужно обернуть текст в div и задать всё это ему вместе с шириной.

Как на кнопку выпадающего меню повесить ссылку?

marcys, считать клики. Если первый, то одно действие и прибавлять счетчик, если уже второй, то другое.

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

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

Что же вам не гуглится-то? Ведь каждый день такой вопрос.
Поможет: https://habr.com/ru/post/329820/

Из-за разной длины текста они выходят разной высоты.

Не выходят. Это страсть к лишним оберткам вводит вас в заблуждение.

Карточки у вас уже одной высоты. Потому что по умолчанию align-items имеет значение stretch, которое растягивает все дочерние флекс элементы на одну высоту в рамках строки. Обратите внимание на последний нюанс.
Чтобы вообще все карточки были одинаковой высоты, нужен либо грид либо js. Но обычно этого и не требуется.

Если вы обведете все practice-column рамочками, то убедитесь в этом.
А дальше все дочерние обертки растягиваете по высоте на высоту родителя. Последнему задаете флекс и раздвигаете его два дочерних элемента либо с помощью margin-top auto либо space-between.

Но всё это можно еще упростить, если ответить на вопрос, зачем вам столько оберток? Зачем нужен practice-column, если вся карточка обернута в ссылку? Зачем внутри ссылки ещё один div practice-item? Эта обертка practice-item-descr тоже не ясно с какой целью понадобилась. Но может там на макете какой-то фон отдельный.. Макета вы не показали.

Имеет смысл поступить так:
1. practice-body сделать списком, а не div.
2. practice-column - будет li. Все они окажутся одинаковой высоты в рамках строки.
3. Ссылку растянуть на всю высоту li и задать flex и ему column (хотя я бы предпочла гриды).
4. practice-item - убрать. Я не придумала, зачем он там может понадобиться.
5. Если в макете нет оснований для practice-item-descr, то тоже убрать.
6. А вот картинку имеет смысл оборачивать в div или figure, чтобы при адаптиве ничего никуда не уползло, для сохранения пропорций и т.д. (но это на ваше усмотрение)
7. Останется ссылка-флекс и в ней 3 дочерних элемента. Последнему задаете margin-top: auto.

Проблемы будут если захочется выравнивать и заголовок и текст. Тут два варианта: либо к тому времени когда захочется подтянется subgrid либо js.

Как отцентровать элемент?

<div class="line1"></div>
  <div class="line2"></div>
  <div class="circle"></div>

Если у кружочка нет функциональной нагрузки, то вот это всё можно смело удалить из разметки и заменить на псевдоэлементы или просто градиенты: два линейных и один радиальный.

Как сделать так, что бы при нажатии на tab фокус не пререходил на button?

За это отвечает атрибут tabindex.

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

Если мышкой нажать нельзя, то это disabled

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

godsplane,

Это сам по себе блок.
Заголовки есть внутри этого блока.

Обычно по ним можно понять о чем весь этот блок и дать ему название.
Либо это не один блок, а несколько, каждый со своим заголовком.
Либо это список каких-то блоков __list
Без контекста сложно.

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

Например есть блок который выглядит как просто текст на черном фоне.

Он что, просто текст без заголовка и смысла? У блока, в котором он лежит нет названия?

Со слайдерами аналогично, они же не просто так приляпаны на страницу, есть ведь контекст, что хотят показать этим слайдером. Фотки туров или событий или что-то ещё.

Не появляется второе модальное окно?

Дмитрий Ярощук, прямо в codepen видно, где изменился цвет

Как сделать кнопку-изображение с эффектом hover в html/css?

krl76, совсем прекрасный вариант:
черное сделать фоновым svg, а красное обычным фоновым цветом.

При наведении меняете цвет фона.

И все довольны.

Почему так отображается SVG?

Потому что градиенты не дружат с внешними спрайтами.

Не появляется второе модальное окно?

Рекомендую использовать редактор с подсветкой кода.
Тогда такие ошибки будут видны за километр.
Также можно пользоваться валидатором.
У вас так:
id=popupPaymentWrapper"
Надо так
id="popupPaymentWrapper"

Как выровнять текст с псевдоэлементом по центру контейнера?

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

Как с помощью flex-ов расположить блоки таким образом?

Что-то фигня какая-то всё получается.

Логично.
Используйте гриды.

Как с помощью flex-ов расположить блоки таким образом?

Только фиксируя высоту или с доп обертками.

Т.е. сначала нужно понять семантику разметки и кто такие блоки 1, 2, 3 и 4.

Как подставить класс?

an, так и где удаление класса для всех кнопок?

$('. acc-btn').removeClass('active')

Как подставить класс?

an,

при нажатию добавляется класс, а по нажатию на следующую кнопку, с первой класс не удаляется

Да я ведь написала: сначала, при клике, убрать всем. Добавить только для this.

Если при повторном клике нужно закрывать, т.е. active не нужен, то значит, добавлять внутри проверки (сами проверки у вас уже написаны)

Как подставить класс?

an, $(this).addClass('active');
И не забывать сначала всем убирать.

Как подставить класс?

Так для $this и добавлять

Почему при изменении ширины экрана элементы наезжают друг на друга?

В этом частном случае поправить можно так

transform: rotate(-180deg) translate(100% 100%);
transform-origin: left top;

Не факт, что это поможет в вашей реальной задаче, но можно подумать в аналогичную сторону.