Как исправить горизонтальный скролл на сайте

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

Ниже я буду описывать способы нахождения элементов, которые создают горизонтальный скролл.

Первое решение

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

* {
outline: 1px solid red;
}

После указания этого CSS, все элементы на странице будут обведены красным цветом — тем самым можно посмотреть где заканчиваются границы у всех блоков.

Иногда после этого сразу становится понятно какой блок вылазит за границы.

Второе решение

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Использовать JavaScript для поиска элементов.

Откройте консоль разработчика в вашем браузере. Нажмите F12 или Ctrl + Shift + i и перейдя во вкладку «Консоль» вставьте этот код и нажмите Enter. После этого у вас должно вывести ТОЛЬКО «undefined» или еще другие строки, например как на скриншоте ниже.

<div id="content".. в данном случае — это тот самый элемент, который вылазит за границы сайта и вероятнее всего создает горизонтальный скролл. Посмотрите на его стили и проверьте его расположение.

Третье решение

Вам нужно выделить весь контент (заваж мышкой и начать выделять весь текст сайта) и двигать его вправо, тем самым, вы можете найти блок который вылазит за границы. Чтобы визуально представить как это происходит — смотрите GIF’ку ниже.

Четвертое решение (ХАК)

Если из всего вышеперечисленного вам ничего не помогло, тогда предлагаю использовать следующий способ.

html, body {
    max-width: 100%; 
    overflow-x: hidden; 
}

Это устанавливает 100% ширину для html и body, а так же убирает скролл по x-оси. Я не советую использовать этот способ, потому что он не решает проблему, а лишь маскирует ее.