В каких слечаях можно использовать 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 :)

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

Shiro-to, сделайте, пожалуйста, песочницу с видимой проблемой на codepen.io
Потому что с тем кодом, который вы выложили всё ок.

А вообще, лучше без ресета жить.

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

Какой padding у вас не работает?
В коде я вижу два и оба по нулям.

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

1. id для стилизации обычно не используют по нескольким причинам. В том числе, специфичность выше чем у классов.
2. Почему-то ссылкой вы называете див <div class="link">
Подумайте, как другие люди должны это понимать.

Меняем разметку:

<nav class="main_menu">
    <ul class="links">
        <li><a class="link" href="#">Главная</a></li>
        <li><a class="link" href="#">Доставка</a></li>
        <li><a class="link" href="#">Гарантия</a></li>
        <li><a class="link" href="#">Каталог</a></li>
    </ul>
</nav>

Меняем селектор с #Main, #Delivery, #Guarantee, #Catalog на .link
И .link a.active на .link-active.
В js класс .active на link-active

Онлайн-школа или личный ментор?

Теперь ищу какую-нибудь толковую онлайн-школу, ментора или кого-то/что-то еще

Ищите задачи

Как расположить блоки разной ширины с помощью grid?

malayamarisha, ну не повезло :)

Как расположить блоки разной ширины с помощью grid?

malayamarisha, есть попутный вопрос: почему дизайнер первые два элемента нарисовал с текстом и одним расположением, а остальные по-другому? Может быть, они и по логике разные, а не только дизайнерская затея? Тогда и доп. обертка будет более чем логична.

Как растянуть левый блок по высоте относительно правого?

Даниил, да, верно

Как расположить блоки разной ширины с помощью grid?

malayamarisha, если жестко раздаете ячейки для первых двух, то нужно разбить сетку ещё пополам. Если было 6, то будет 12 колонок.
А дальше дичь основанная на количестве элементов. Вот статейка https://css-live.ru/articles/resheno-s-pomoshhyu-c...
Древний и заметно более простой пример https://jsfiddle.net/Ankhena/q3s9jdmb/

Если количество элементов известно, то всё проще.

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

Почему продолжает индексироваться сайт?

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

Как расположить блоки разной ширины с помощью grid?

Можно вопрос: зачем это делать гридом? Он же один из вариантов ответа.