Неккоректное отображение сайта написанного на 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?

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

Как сделать этот предмет с помощью CSS + HTML(Меня интересует елемент, что находится посередине.)?

Достаточно одного div и одного bg

<div class="container"></div>

.container {
  width: 130px;
  height: 70px;
  background: radial-gradient(ellipse 100% 90% at left 20%, transparent 99.5%, orange) no-repeat left center/ 33% 100%,
    linear-gradient(orange, orange) no-repeat top center / 34% 100%,
    radial-gradient(ellipse 100% 90% at right 20%, transparent 99.5%, orange) no-repeat right center/ 33% 100%;
}

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

Flyheck, Даниил, ай какие молодцы, случайно зашли комментировать один древний вопрос )))

Читаем задачу

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

Смотрим в то, как выглядит исходник

Как сделать этот предмет с помощью CSS + HTML(Меня интересует елемент, что находится посередине.)?

Даниил, собственно, я не пишу это в ответы и не предлагаю никому вызовов.

SVG задачу решит? Решит.
Если автор хочет решений с градиентами и border-radius'ами, то может начать с того, что пробовал и не получилось. Делать за него не имею желания.

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

Даниил, честно говоря, не вижу в вашем варианте того, что нужно ТС.