Почему появляется горизонтальная полоса прокрутки?

Потому что вы не используете box-sizing: border-box; для элементов с заданной шириной. Т.е если у вас есть эелемент с width:100%; вы ему добавите padding:20px; то его ширина уже будет 100% + 20px, что шире чем ширина монитора, поэтому для этого элемента нужно прописывать box-sizing: border-box