As a start I would change the farewell and farewell div rules to this:
#farewell{
margin:30px 20px 10px;
display:flex;
min-width:0;
}
#farewell div{
float:none;
border:border: 1px solid #9F0;
min-width:0;
margin-left:auto;
}
That will get some semblance of normality back into the page.
You have a number of logic errors in that you give a min-width of 485px which immediately rules out most phones but you also gave it a margin-left of 35% thus ruling out most tablets and making the element too wide for small desktops also.
Your orange buttons are also pushing too wide on small screens and do not wrap in time so you will need to look at that. Maybe something like this:
#tablenav div > div {
display: inline-block;
width: auto;
margin:6px;
}
#tablenav div a{
margin:0;
}
That was another logic error because how d you know what 27% + 12px means at different screen sizes. At smaller screens the three items push the page wide because they are larger than the container. You need sensible and controllable logic in responsive design and not rely on guestimates:)
The code above will fix those errors and the image will align right and scale with viewport and the buttons will line up on small screen.
Here are the before and after screenshots:
Before:
:after:
.
