CSS - Div's are running off page on mobile - html

Question

I have the below set of code. It works fine in most browsers. But I noticed on my main Galaxy S5 browser (which I'm sure affects other browsers also), the two images run off the page. I would appreciate any help. I know the answer may be simple, but after trying a 100 things over a few days, I believe I just have an unnecessary value somewhere and I accidentally merged two solutions.
Thanks,
.arrow {
width: 21px;
height: 57px;
}
.pagination {
max-width: 100%;
}
.pagination_sub {
width: 700px;
height: 57px;
margin: auto;
display: flex;
align-items: center;
}
.pagination_pre {
width: 410px;
height: 57px;
}
.greypagination {
width: 33px;
height: 57px;
}
.prearrow {
width: 12px;
height: 57px;
}
.prepagination {
width: 44px;
height: 57px;
}
<div class="pagination">
<div class="pagination_sub">
<div class="pagination_pre"></div>
<div class="prepagination">
<img src="../images/pgpage.jpg" width="44" height="57" />
</div>
<div class="greypagination">
<img src="../images/pg1-grey.jpg" width="33" height="57" />
</div>
<div class="greypagination">
<img src="../images/pg2-blank.jpg" width="33" height="57" />
</div>
<div class="prearrow"></div>
<div class="arrow">
<img src="../images/pgarrow.jpg" width="21" height="57" border="0" />
</div>
</div>
</div>