Не могу поднять картинку?

Юрий Иванов, почему не поможет? Тётька будет прибита к нижнему краю блока и опустится вместе с ним.

Не могу поднять картинку?

Юрий Иванов, лекции в аудитории могу, консультации могу. Записывать себя на видео не вдохновляет. Статьи пишу очень редко.

Не могу поднять картинку?

Idwln,

До флекса ещё пара уроков, поэтому скоро и с ним подружусь.

Прибейте абсолютом.
Или просто поставьте фоном.

Не могу поднять картинку?

Idwln, ну и макет не забудьте прикрепить, чтобы хоть как-то знать где она должна быть.

Не могу поднять картинку?

Idwln, вы можете заменить свои картинки на любые подходящие из яндекс.картинок или воспользоваться сервисом заглушек, например, https://picsum.photos/

Сейчас в вашей песочнице ничего не видно, кроме Contact Us и альта от картинки.

Не могу поднять картинку?

Idwln,

Но теперь могу margin с отрицательными значениями выровнять вверх. Но это не то, что я хотел

Вот ведь...
Вы двигали её зачем-то margin'ом, у вас не работало.
Я вам сказала как починить.
Теперь вам не нравится, что margin работает.

Думаю, что вам пришла пора начать изучение гридов. А по дороге флексов и позиционирования.
Инлайн-блоками перестали верстать уж скоро лет 10.

По дороге нужно определиться, будет ли эта тетка заменена на реальную фотографию. Если нет, то это не img в обертке, а псевдоэлемент. И позиционировать нужно его.

Не могу поднять картинку?

Idwln, ну вот так же как я. Нужно зарегистрироваться на codepen.io, вставить туда код, сохранить, дать тут ссылку.

Не могу поднять картинку?

Idwln,

работает он не при маленьких значениях высоты и ширины

Простите, что? Этому коду вообще без разницы какого размера будет картинка, он двигает родителя.
Сделайте песочницу, в которой видно вашу проблему.

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

Вообще, инлайновые стили перебиваются с помощью !important
Но разумнее почитать документацию к слайдеру и указать ему подходящие настройки так, чтобы не было нужды пользоваться important. Например, css mode.

Не могу поднять картинку?

Idwln, сложно сказать, что вы делаете не так.
https://codepen.io/AnnaSummer/pen/PoExaEO

Как подвинуть текст внутри div?

И вообще правильно ли я сверстал данный элемент?

Неа

0. Для начала, знакомьтесь, это валидатор html https://validator.w3.org/nu/
Он расскажет о том, что атрибут align устарел.

1. 02 это псевдоэлемент.

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

Либо это просто номер страниц или глав (секций) или типа того. И тогда это просто псевдоэлемент. Если это только украшения.

Этот псевдоэлемент позиционируете с помощью гридов или абсолютом.

2. Картинка, которую вы даже называете словом fon.png должна быть сделана фоном. Она ведь не содержит никакого смысла, а является только украшением.
И слеши в путях пишутся в другую сторону, так /

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

Не могу поднять картинку?

На block поменяйте.

Как сделать автоматический padding по краям?

Может, вы просто поставите элемент по центру?

В чем ключевые различия блочного от строчного элементов?

1.

что у блочного элемента ширина по умолчанию 100%,

Не 100%, а занимает всю доступную ширину. Почитайте про box-sizing, поймете в чем разница.

отличается только тем

Нет не только. Ещё у строчным не задать размеры (и ширину и высоту) и вертикальные отступы. Вертикальные паддинги задать можно, но работать они будут не так, как для блочных. А также и некоторые другие свойства работают не так, как с блочными.

2. Что во что можно вкладывать определяется не блочностью/строчностью, а категорией контента https://developer.mozilla.org/ru/docs/Web/Guide/HT...

Как правильно оформить БЭМ код?

Если column-about переиспользуется отдельно от своего родителя about, то да, его можно сделать блоком.
Только класс назвать как-то нормально. По смыслу этого блока.

Зачем для всего задавать класс?

Вам нужно подробно почитать как браузер обрабатывает селекторы.
.navbar ul li a
в этом случае ему придется найти все ссылки на странице, затем пойти от каждой вверх по дереву и проверить есть ли родитель li, затем лежит ли это всё в ul и снова все найденные проверить лежат ли они в .navbar

Вместо того, чтобы просто и сразу взять элементы с нужным классом .navbar__link

И все остальные аргументы про специфичность и переиспользование.

Как изменить цвет внутри картинки?

Вы точно уверены, что внутри иконки есть именно белая часть?
Я не очень.

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

Блоки - это переиспользуемые штуки. Так?
Вот назвали вы его header-nav и как вы его будете переиспользовать в футере или где-то ещё кроме шапки?

Или надо header-nav задать что это элемет блока header?

Тут нужно почитать о том, что блок не должен знать о своей внешней геометрии и чтобы её задать как раз делают миксы.
class="header__nav nav"

С этим

<div class="header__logo"><a href="/">MYCOMPANY</a></div>

аналогично.
Только div вообще лишний.
Остается

<a  class="header__logo logo"  href="/"><img class="logo__img" src=""></a>

А потом элементы блока header__header-nav указывать так?

Так: header__header-nav__link вообще нельзя делать в БЭМ.
Можно как-то так <ul class="nav__list">, <li class="nav__item">, <a class="nav__link">

Можно ли в фигме скрыть эффект в read-only mode?

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

Дублировать контент или динамически адаптировать на js?

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

Я в большинстве случаев за то, чтобы страница без стилей выглядела и читалась логично. А значит, там ничего не дублируется.