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

Huntgold, ForSureN1,

а чем вам собственно table не угодил ?

Table используют для табличных данных.

Если данные действительно табличные (сомневаюсь), то да, table.

Если нет, то задача элементарно решается гридами и nth-child.

Как подогнать верстку под Pixel Perfect?

Через что позиционровать элементы - мэрджены и пэддинги подгонять?

То, что съехало, то и подгонять.
В заголовке явно съехало межбуквенное расстояние. Довольно странно подгонять его с помощью margin или padding.

Так оно блин в адаптив не лезет

Этт как?
Значит, нужно переписать адаптив или дописать дополнительные media.

теперь его нужно подогнать под Pixel Perfect. Требование заказчика.

Сначала нужно узнать допуски.
И чтобы сам макет в эти допуски попадал.
Проверять только на макетной ширине.
Но у вас в любом случае очень большие расхождения.

по центру - 3 заголовка, текст, кнопка. Блок - дисплей флекс. Флекс дирекшн - column;

Зачем бы ему флекс и column?

правый блок - картинка;

Скорее псевдо, чем img

Можно ли в БЭМ верстке подключать reset.css и применять символ * для сброса всех отступов?

markak,

в любом случае точный ответ нужно искать у БЭМа, который по документации не рекомендует сбрасывать стили.

Будет скучно, поищите :)

В любом случае, БЭМ и его вариации можно использовать очень разными способами.

Можно ли в БЭМ верстке подключать reset.css и применять символ * для сброса всех отступов?

markak,

если смотреть дальше, то reboot в bootstrap построен на основе normalize.

Рада за него. Это не отменяет устаревания normalize.

Можно ли использовать bootstrap в bem и как лучше это делать нужно узнавать на форуме https://ru.bem.info.

Можно.
Примесями.
Только радость сомнительная.

Можно ли в БЭМ верстке подключать reset.css и применять символ * для сброса всех отступов?

https://qna.habr.com/answer?answer_id=2016658 и комментарии
https://qna.habr.com/q/1023244 комментарии под вопросом

Как сделать, чтобы высота блока занимала все оставшееся место?

https://jsfiddle.net/k17pw6js/
альтернативы легко гуглятся

Как сделать, чтобы не обрезался текст в плейсхолдере?

marinkas, "прямо на" в дизайне не значит, что это плейсхолдер. Это значит, что дизайнер нарисовал label поверх инпута.

Как сделать, чтобы не обрезался текст в плейсхолдере?

marinkas,

та вроде не лейбл

Перечитайте, пожалуйста, спеку. Для чего нужен placeholder, а для чего label.
То, что нарисовано у вас на скринах это лейблы.
Да, часто при коротких фразах не заморачиваются и если так надо по дизайну, используют placeholder вместо label.

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

Можно ли изменить кол-во колонок в bootstrap 4 только на телефонах и планшетах?

начиная с разрешения на планшеты изменяется кол-во колонок с 12 на 6

Так не на 7 же.
Ничего принципиально не изменилось.
Если в 6 колоночной сетке блок занимает 2 столбца, то в 12-ти это будет 4 и ничего больше.

Зачем в современном мире бутстрап для обычных сайтов при наличии гридов - это загадка.

Чем заменить тег border в hover чтобы при наведение вылезало фото?

Awar,

Возможно ли это реализовать в css ?

Да, конечно. Ставите картинку на фон псевдоэлементу и вперед.

Например, так
https://jsfiddle.net/2okdsjaf/

Чем заменить тег border в hover чтобы при наведение вылезало фото?

И где в вашем коде фото? Зачем там огромный черный бордер? В общем мало, что понятно.

Оформите код в песочницу на jsfiddle.net так, чтобы была видна проблема.

Если нужно, чтобы фото перекрывало границу, сместите его, например, с помощью position relative.

Как растягивать картинку на всю ширину экрана если у родителя есть фиксированная ширина?

А вынуть картинку из контейнера никак?

Если совсем никак, то

.img{
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

И overflow для какого-нибудь родителя с шириной на всю ширину окна.

Как правильно сверстать два состояния сайта, до авторизации и после?

Думаете, что-то изменилось за 4 дня с момента вашего прошлого вопроса?
https://qna.habr.com/q/1063682

Как создать адаптивный футер?

Thomas Laybe,

В футере не нужно использовать секции

С чего бы это?

alex01s Можете начать вот с этого:

Как правильно выводить изображения в bootstrap с сохранением пропорций?

Пропорции https://jsfiddle.net/Ankhena/cLhxv7eq/

Важно еще сохранять одинаковую высоту блоков

Одинаковая высота блоков в рамках строки это флексы.
В рамках всех строк - гриды либо js.

На бутстраповские классы сами переводите.

Использоваться лучше Flexbox или Grid?

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

Заодно разберетесь в нюансах обоих свойств и не нужно будет задавать такой же вопрос для соседних блоков.

Как сделать, чтобы видео полностью влезало?

maketosLikes, да

Почему стилизация гамбургера тегом div отличается от button?

Genri_Rus, потому что есть особенные элементы, вспомните инпуты или еще круче селекты. Их вид не полностью зависит от css.
Я вам в первом посте дала ссылку, которая наводит на размышления и на путь куда гуглить дальше для детального изучения.

Почему стилизация гамбургера тегом div отличается от button?

Genri_Rus,

наверняка есть какой-то стиль задающий такой эффект )

но не в css

Почему не растягивается грид строчка по вертикали? В чем логика?

Понять,почему так происходит.

Потому что по умолчанию grid-template-rows auto.

Кстати, если вы ждете, что кто-то будет скачивать архивы с кодом, то скорее всего, напрасно.
Для размещения кода есть песочницы типа jsfiddle.net