элемент в правой части окна перекрывается при изменении размера окна

У меня есть два набора кнопок (jQuery для мобильных устройств) слева и справа на странице. Когда я сжимаю окно с левой стороны, левый набор кнопок перемещается, как и ожидалось, сохраняя некоторое пространство между собой и границей окна. Но когда я сжимаю правую сторону, окно перекрывает набор кнопок на этой стороне.

Как я могу этого избежать? Я хотел бы, чтобы оба набора кнопок сохраняли свое процентное горизонтальное положение независимо от того, сжимаю ли я экран справа или слева. (Когда я сжимаюсь снизу, оба набора кнопок сохраняют свое пространство от верхней границы окна).

CSS:

   #mainPage{
position:relative;

}

.subMenuClass{  /* right side */
display: none;
position: absolute;
z-index: 10000;
top: 2%;
left:85%;

}

 .mainMenuClass{      /*left side*/
display: none;
z-index: 10000;
position:absolute;
top: 2%;
left: 5%;

}