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

Евгений Залецкий, кого простите через инлайн блок сделать? Кнопки на одном уровне расположить инлайн-блоками? Покажите, пожалуйста?

Почему расширяет блок под себя?

Картинку абсолютом и object-fit

Как сделать такой хедер c картинкой?

Только это не .logo
Но суть верная.

Под элементом грид сетки появляется пустое пространство. Как исправить?

https://codepen.io/AnnaSummer/pen/BarLdyO

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

Вероятнее всего родитель растягивается какими-то силами, например, флексом или гридом родителя.

Где найти такой виджет для вебсайта?

https://yandex.ru/dev/share/

Проще самостоятельно сделать.

Не появляется изображение?

Обновите страницу, dev tools покажет где браузер ищет картинки.
Сравните с тем, где они на самом деле.

Но вообще, эти svg это украшения, их лучше в css прописывать. Там и с путями проще.

Как сделать чтобы одна секция шла после другой, и не накрывала её?

Дело в том, что все секции (и другие блочные элементы) сами по себе идут друг за другом. Каждая с новой строки.
Даже если вы вообще ничего не напишете в стилях. (Исключения: дочерние гридов, флексов, абсолюты...)

А дальше нужно выяснить зачем вы задали им абсолюты и вывели из потока.
И убрать лишние.

Как назвать классы, если только один css стиль на три html файла?

Там же есть одинаковые элементы , мне надо им дать классы .как мне из назвать ?

Если они одинаковые, то в чем проблема?

Конкретизируйте как-то вопрос.
И почитайте про БЭМ, хотя бы как систему нейминга.

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

Semantic.Moscow, и, пожалуйста, перестаньте тегать меня в комментариях.
Хотите рекламировать устаревший способ с line-height равным высоте, про обнуление всех отступов для * и т.д. пишите напрямую ТС.

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

Semantic.Moscow,

флекс не поможет центрировать, если у вас высота 49px

А там рядом ничего не написано про 50 и куда и как его задать?

как по мне, так лучше указать line-height, который займёт всю высоту кнопки (запретить перенос!)

Если вам нравится, когда текст выпадает из кнопки - пожалуйста, запрещайте переносы.
И да, так делали 5 лет назад, когда не было флексов.
Можно ещё обрезать overflow. Отличная кнопка будет.

почему не паддинг?
ну, потому, что если шрифт вдруг не подгрузится или будет заменён резервным по какой-то причине браузером, то у нас не случится никакого сдвига из-за разницы в высоте глифов. (про font-stretch тоже не забываем!)

Ок.
Кнопка не прыгнет.
Прыгнет всё остальное.

ну и ошибка новичка - не предусмотреть text-decoration или :hover{font-weight:bold или что там могут напридумывать...

Это один из вариантов переполнения.
Флексы прекрасно с этим справляются.

или что там могут напридумывать...

Да, в первом комментарии я описала то, о чем хорошо бы подумать в первую очередь и описала как раз вчерашнюю проблему одного из студентов.
А в самом низу было написано (неловко повторять, но извините):

Лучше рассматривать конкретный пример.

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

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

Semantic.Moscow, вы считаете бордеры для отступов универсальным решением?
Да, в затейливых дизайнерских случаях, можно использовать всякие костылики, но по возможности, лучше пользоваться свойствами, соответствующими своему смыслу. Свойство для внутренних отступов это padding. В случае выравнивания кнопок замена padding на border ничего не добавляет, а логику убирает.

Флекс не поможет центрировать?

Я где-то сказала, что способ делать кнопки один и поступать надо так и только так?

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

Semantic.Moscow,

лучше сразу обнулить всё - *{padding:0;margin:0

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

и если размер шрифта чётный, то и размер lh ну никак нельзя указывать относительным.

Эммм, ну ок, если у дизайнера fz 14, а lh 21, вообще без разницы в каких единицах я его задам у себя в верстке (с точки зрения чет/нечет и симметричности)

угадаете, какой у меня в браузере установлен размер шрифта по умолчанию? (про неизвестный em)

Если для всех шрифтов размеры заданы в em, то не угадаю. Да и зачем бы мне...
И как раз таки line-height коэффициентом решает эту проблему.

если шрифт особенный и никак не хочет вставать ровно посередине,
это легко компенсируется свойствами бордера

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

проблема высосана из пальца.

Вообще не вижу проблемы.
И по-моему, вы очень сильно удалились от вопроса автора.

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

Semantic.Moscow, я выше написала способ, решающий эти проблемы.

Почему em нам неизвестен, я не очень поняла. Да и вообще о em речи не шло.

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

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

Semantic.Moscow, можно
Любой четный размер шрифта и lh 1.5

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

Как обычно, нет универсального ответа.

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

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

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

Иногда получается так, что шрифт + line-height + симметричные padding не дают макетную высоту кнопки. Например, получается 49px, а в макете 50.
Можно дополнительно задать мин высоту 50 и центрирование флексом.

Лучше рассматривать конкретный пример.

Какой сервер лучше использовать Xampp или Open Server?

1Aspect1,

и несовместимости с чем-нибудь

Для этого нужно указать, несовместимости с чем именно вас тревожат.

Как сверстать следующий блок?

Corepro, градиентами, псевдоэлементами, SVG... что-нибудь ещё

Какой сервер лучше использовать Xampp или Open Server?

Open Server вроде бы проще в управлении

Если вам проще, то в чем вопрос?

Как в SASS задать box-shadow с цветом?

Потому что деление

box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

box-shadow: 0 0 0 0.2rem #{rgba(0 123 255 / 25%)}

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

vertically-challenged,

ну чтобы работало как в Телеграме

При такой формулировке - вам на фриланс.

Покажите, что вы делали и что именно не получилось на codepen.io
На что похоже я показала в примерах выше. Но есть и альтернативные варианты.