You have a rule
body {border:1px outset #ddd;margin:10px auto;padding:5px;width:1024px;height:768px;color:#999;font-size:108%}
That is messing things up, by fixing the width and the height of the site which makes it totally non responsive.
Did you add that rule, and if so why??
You should not fix the height and width. Fixing the height makes your content overflow below the bordered box. Fixing the width makes it non responsive on smaller screens.
The width of the site should be specified in the Theme option, in main option > Wrapping areas > Wrapper Area > Theme width box.
the border can be set below that with the border option.
If you want to impose a minimum height so that the box is at least a certain height, you need to use a rule with min-height:xxxpx but NOT height:xxxpx
If you did not add that rule, then may be it came from converting a site of choosing a sub theme. Go to main Options > Fonts & Custom > Custom CSS Rule box, if the rule is in there, remove it.
If not there it could eventually be in main option > Wrapping areas > Outside BG CSS+ box.
Once we clear that issue we can move onto the next one