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

Либо переставить значения bg position так, как вам нужно. Не от 0 до 100, а от 100 до 0.
Либо изменить направление анимации на reverse

Почему появляется скролл, при уменьшении line-height?

Kolya112151, это как раз не странно, а очень даже нормально.
Потому что прокрутка появляется не из-за line-height.

Почему появляется скролл, при уменьшении line-height?

Kolya112151, пожалуйста, сделайте песочницу с проблемой на codepen.io
В которой будет видно, что при line-height: 1.15; есть скролл, а когда этого свойства нет, то и скролла нет.

Почему появляется скролл, при уменьшении line-height?

Скролл не имеет отношения к line-height.
Можете самостоятельно проверить, отменяя это свойство в девтулзах.

Но в показанных вами стилях нет обнуления margin у body.
И именно из-за него появляется скролл: min-height: 100vh; + марджины = скролл.

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

senator, где-то в вопросе есть информация о том, какие браузеры нужно поддерживать?
Для ИЕ5 придётся сменить разметку на table. А также закрасить уголки у скругленных картинок в белый.

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

Список
Грид в 2 колонки
Каждая карточка это li
В ней:
- h3 (подставьте нужный уровень заголовка)
- p с ценой
- div или figure с картинкой внутри
- ссылка Подробнее
Саму карточку тоже верстать гридом. Первым слоем картинку, поверх всё остальное.

Что именно не получилось?

Судя по вашему скрину, стилей нет вообще.

Растягиваются изображения при flex-wrap:wrap. Как это исправить?

Яков Карелин, еще бы ответ не был бредом...

Почему появляется отступ?

Levott,
вариантов много:
- Грид на 4 ячейки
- Отступ для сайдбара через calc
- Всё засунуть в контейнер, фон для хедера добавлять псевдоэлементом
- Не засовывать хедер в грид
и т.д.

Почему появляется отступ?

Levott, сложно сказать, потому что в вашем коде (если и там разобраться с кавычками), логотип тоже прижимается к левому краю.
Оформите нормально песочницу на codepen.io с видимой проблемой.
Предварительно исправив все ошибки валидатора (и разметку и стили)

p.s. названия классов у вас это нечто... Один раз мне попался в руки такой проект на доработку. Верстальщика прокляла.

Почему появляется отступ?

grid-template-areas: "header header "sidebar main" "footer footer";

кавычку потеряли

В каких слечаях можно использовать ID?

Вадим, угу :)

Как через css показать допустим левую часть картинки только или обрезать правую на 40%?

- overflow
- clip-path
- сделать фоном и использовать его свойства
и т.д.

С помощью какого инструмента можно сверстать то что на картинке?

Сергей Мурин,

Если это можно сверстать одним классом, то как это сделать

В один не получится. Либо класс будет у списка, а li сделаете дочерним селектором по классу.
Но я имею в виду, что судя по скрину, в один селектор не выйдет, там намек на flex-grow, а его задают флекс-элементам.

Если grow не нужен, то да, просто flex и flex-wrap списку.

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

С помощью какого инструмента можно сверстать то что на картинке?

Флексами

Неккоректное отображение сайта написанного на PHP (Mqsl), в чем причина?

Pustoi, прямо на первом скрине, там где спаны в кнопке. Номера строк вы предусмотрительно обрезали.
Да и зачем это делать глазами?
Валидатор в помощь https://validator.w3.org/nu/

Неккоректное отображение сайта написанного на PHP (Mqsl), в чем причина?

По виду, слетели стили или их часть.
Возможно, в этом виноваты незакрытые или неверно закрытые теги, а не сами стили.

Растягиваются изображения при flex-wrap:wrap. Как это исправить?

Яков Карелин,

свойство flex-grow с значением 0 для изображений внутри контейнера?

Чтобы ответить вам, нужно знать:
1. Что должно получится в результате.
2. Какие ещё есть свойства и какая разметка у этого дела. В идеале живым примером на codepen.io

Растягиваются изображения при flex-wrap:wrap. Как это исправить?

Установить свойство flex-shrink: 0; для изображений. Это предотвратит их растягивание.

Это предотвратит их сжатие.
За растягивание отвечает flex-grow

Не работает container в css?

Shiro-to, "это" устарело лет на 10.

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

как сверстать блок справа?(там где графики и тп)

Так и сверстать: грид на 4 столбца.
Что именно у вас не получилось?

как поставить так элементы? (видно что панель слева, у блока справа имеется что то типо своей шапки-хз как это назвать)

Аналогично: гриды, флексы. В зависимости от того, как эта панелька открывается/скрывается/адаптируется.
Шапка так и называется: header :)