Почему не применяются падинги?

<a class="social-link" href="https://www.instagram.com/zjedn.oczeni?utm_source=ig_web_button_share_sheet&igsh=OGQ5ZDc2ODk2ZA==" aria-label="Наш аккаунт в Инстаграме">
        @zjedn.oczeni
      </a>

.social-link {
  display: flex;
  column-gap: 1em; /* ваш отступ */
}

.social-link {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 1em; /* ваши размеры */
  aspect-ratio: 1;
  background: url("../img/inst.png") no-repeat center/ contain; /* путь к картинке скорректируйте и в идеале найти картинку в svg */
}

Как-то так.
Без div, p и прочего барахла.

Иконка инстаграма - не контентное изображение, а украшение ссылки. Его лучше убирать в стили. Я показала один из вариантов как именно.

Почему не применяются падинги?

Судя по скрину они как раз таки применяются. И именно из-за них такая дичь и происходит.
Если пока не очень хорошо пользуетесь инструментами разработчика, я рекомендую обводить элементы рамочками (outline и отрицательный outline-offset). Удобно толстенькими разноцветными и полупрозрачными.

Проверка элемента в другом элементе в js?

const elems = document.querySelectorAll('.first_size');
elems.forEach(elem => {
  if(!elem.innerHTML) {
    elem.closest('.meta_wc').classList.add('block-hide');
  }
})

.block-hide {
  display: none;
}

Почему игнорируется display:flex после билда?

Icantdothis, верю только доказательствам

Создание страницы на гридах.?

Не нужно дублировать вопросы
Как сверстать такую страницу?

Разделять ли аккаунт в соцсетях на личный и профессиональный?

KosmoMish, если вы ничем не хотите делиться с этими коллегами, то зачем вам второй аккаунт?
Обычно есть метка "для близких друзей" или аналогичные настройки публикаций.

Почему игнорируется display:flex после билда?

Icantdothis, добавьте туда еще bgc red чтобы убедиться

Как записать js результат в переменную php?

Либо получайте дату сразу на php.
Либо результат этого скрипта выводите не в консоль, а туда, куда вам нужно.

Как лучше сделать декоративную линию между двумя словами?

Kinolog76, аналогично, только вместо span псевдо.

Ну и любые вариации чей это псевдо. От обертки или от элементов.

Для этого не нужен отдельный ответ.

Как лучше сделать декоративную линию между двумя словами?

Я бы сделал через span

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

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

Очевидно, что номера должны быть частью ссылки..
Что именно вы с ней делали, что не получилось?

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

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

этот блок как бы слишком далеко от основной информации

Кто-то же его так расположил в верстке. Не располагайте так далеко. Используйте другие единицы измерения и/или функции min, max, clamp.
Либо перестраивайте при media.

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

Работает-то оно у всех.
Только ваш light-star спозиционирован относительно body.
Поставьте relative тому, относительно кого должен быть спозиционирован абсолют.

Что с версткой происходит?

rootnoroot, чтобы работал overflow, браузер должен понимать при выходе за какие рамки он должен что-то обрезать. Если у блока нет соответствующего размера, то и эффект будет отличным от ожидаемого.

Что с версткой происходит?

rootnoroot, потому что только на мобилках для body перестает работать oveflow.
Вешайте на ближайшего подходящего родителя и только там где нужно.

Как сделать волнистый блок в верстке?

smoove1117,
- нарисовать
- обвести
- найти похожий и изменить
- заказать на фрилансе

вроде очевидные варианты

Как сделать волнистый блок в верстке?

svg
clip-path

Как передвинуть отдельную букву, но не сдвинуть другие?

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

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

Как передвинуть отдельную букву, но не сдвинуть другие?

Любой тег, если не казано свойство display работать не будет.

Что, простите?

Как передвинуть отдельную букву, но не сдвинуть другие?

https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

Почему в input не видно последний знак?

- Увеличить ширину
- Уменьшить/поменять шрифт
- Уменьшить padding