Поможете исправить несколько багов в верстке?

Question

[Zhenya Tureysky]

Буду короток.
У меня есть сайт вот он на git hub https://github.com/Zhenya-Tureysky/Affliate.git скачайте и посмотрите кому не лень
Ну или вот он на Git Hub Pages https://zhenya-tureysky.github.io/Affliate_pages_A...
На нем есть несколько багов над которыми я уже толкусь немало времени

Во первый когда я понижаю ширину экрана фоновый цвет который прописан нескольким блокам скатывается в левый край чем меньше ширина экран тем меньше становиться фон. Я знаю что ранее я уже задавал здесь похожий вопрос мне говорили что дело не в самом блоке з фоном, а в окружающем контенте и советовали убирать какие-то куски кода пока все не станет как надо я проследовал совету и у меня нечего не получилось только когда я убирал всю html структуру кроме блока з фоном у меня все было как надо. Эта проблема присутствует почти в каждом моем сайте где есть задний фоновый цвет в свое время когда я видел ее впервые я просто забил на нее, а сейчас уже не могу нормально продолжать обучение пока она еще есть.

Честно не знаю как но у меня каким-то чудом решилась эта проблема но зато я точно знаю что она есть здесь https://zhenya-tureysky.github.io/Denis-Novik/

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

Поэтому буду очень ОЧЕНЬ благодарен тому кто не полениться скачает и скажет что я делал не так. Хоть я и мало на это надеюсь.
Также буду рад если кто-то укажет мне на мои другие ошибке в коде не связанные с вопросом

Comments

[Anonymous]

Залейте на GitHub Pages, или лучше, codepen.io

[Антон Литвиненко]

хоть бы на гитхаб пейджез залил чтобы ате кому вдруг станет не лень могла сразу открыть

[Zhenya Tureysky]

Никита Савченко, https://zhenya-tureysky.github.io/Affliate_pages_A...

[Zhenya Tureysky]

Антон Литвиненко, https://zhenya-tureysky.github.io/Affliate_pages_A...

Answer 1

[Pavstyuk]

Первое что бросилось в глаза. Вы жестко ограничиваете ширину контэйнера:

.container {
  margin: 0 auto;
  width: 1150px;
}

Попробуйте так, должно стать гораздо лучше:

.container {
  margin: 0 auto;
  max-width: 1150px;
  width: 100%;
}

Далее вместо:

.blog_wrapper {
  display: flex;
}

Добавьте перенос:

.blog_wrapper {
  display: flex;
  flex-wrap: wrap;
}

Это же касается всех остальных блоков, где вы используете display: flex.

Comments

[Иван]

да, там сетка толком не сделана...

[Zhenya Tureysky]

Большое спасибо обязательно придержусь ваших советов.

Answer 2

[Иван]

У вас сетка (grid) не спроектирована. Посмотрите пример сетки на flexbox , допустим у того же bootstrap getbootstrap.com
Адаптивная сетка создается на media-запросах https://developer.mozilla.org/ru/docs/Web/CSS/@media

Пока не будет ограничений по сетке, все будет "плавать"