Предотвратить переполнение div

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

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

В настоящее время моя "страница" css

.myPage
{
width: 100%;
max-width: 100%;

margin-left: auto;
margin-right: auto;

position: absolute;

top: 0;
left: 0;
display:none; /*Pages are displayed once called*/
opacity: 1;
}

Я пытался поиграть с переполнением: скрытый, который, как я думал, мог бы работать, но такой удачи не было.

Что я могу сделать, чтобы мой класс страниц не распространялся на мой контент и не приворачивал мою страницу?

РЕДАКТИРОВАТЬ:

Вот обертка страницы.

.pageWrapper
{
background: #FF0000;
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-transform: translateX(0%);
}

Edit2: jsfiddle, который сломан, но имеет весь мой код