Владимир Серых

В Битриксе не столько документация с давних пор не менялась, а архитектурные подходы устарели. Несмотря ни на какие технологические новшества, которые в нём появляются.

Имхо, если вы изучите Битрикс, то вы будете человеком, знающим Битрикс. А веб-разработчиком вы называться не будете. Вам так же сложно будет потом въехать в нормальную веб-разработку, как и нормальному веб-разработчику разобраться с Битриксом.

Если вы хотите найти свою нишу и засесть в неё конкретно и надолго, то углубляйтесь в Битрикс, изучайте его, набирайтесь опыта. Хорошие и качественные специалисты в любой сфере котируются. Но таким образом вы выберете себе мир Битрикса и будете существовать параллельно объективной реальности.

Возможно, дело в пробельных символах.

Если так, то это должно помочь:

1. Установить нулевой кегль для контейнера меню:

.menu
{
  font-size: 0;
}

2. Установить нужный кегль для пунктов меню

.menu li
{
  font-size: 14px;
}

У вас блок «#new_publ», раположенный выше, раздвигает страницу и становится видным сероватый фон справа от нижнего блока, который у вас на скрине.

Можно сделать отрицательные отступы:

margin-left: -100px;
margin-right: -100px;

Я заметил, что на двух андроид-устройствах в браузерах Google Chrome и Яндекс.Браузер hover наступает после клика по элементу. Если элемент на клик не реагирует, а реагирует только на наведение, это сработает. Не уверен, что на всех системах и во всех браузерах так.

Предполагаю, происходит следующее (это гипотеза, может быть неверной):
В тач-устройстве в браузере есть курсор, но он не отображается. Когда вы кликаете куда-то, курсор помещается в эти координаты, и остаётся там. Соответственно, элементы под курсором считают, что на них навелы курсор, и на них отрабатывает ховер.

Но если вы хотите, чтобы элемент реагировал и на ховер, и на клик, то выше верно сказали, что вы хотите нарушить грамотность UX. То есть, вы решаете неверно поставленную задачу. Значит, стоит поставить другую задачу, на уровне выше: как дать возможность пользователю взаимодействовать с одним элементом двумя способами. Но тут зависит от сути взаимодействия. Если вы хотите, чтобы просто была красивость при ховере, то на тач-скрине её не будет. Если хотите, чтобы всплывала подсказка или что-то вылезало — сделайте рядом иконку или кнопку, которая это будет делать. А клик на основном элементе не трогайте, не ломайте UX.

Вот полный ответ на ваш вопрос: g.zeos.in/?q=Stylus%20CSS%20Windows&m=1

Зачем вы использовали bottom?

Возможно, вам подошёл бы flexbox-лэйаут.

Вот статья про него: Полное руководство по Flexbox.
Вот ещё статья с Хабра: Практическое применение FlexBox.

Так же, есть обширная презентация про flexbox Вадима Pepelsbey ..., правда без комментариев, только картинки.

Например, если вам нужно прилепить футер к низу страницы, но высота страницы очень маленькая, то Flexbox вам поможет это сделать.
Основные свойства, которые вам пригодятся:

display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;

Не зная вашу задачу, сложно объяснить. Советую изучить статьи или задать более конкретный вопрос :)