Parts of my site are shifting depending on the browser

‘I just made the catch Kathmandu theme live on our site (https://online.dpsk12.org/) and it’s having some issues:
-Depending on different browsers and computers, things will move around and shift in the page. For example, on my iPad, the four featured content boxes (apply, meet the faculty, the Denver online advantage, and the do more attitude) that sit directly in a line under the main slider image get changed to where two featured images sit on the other two featured images (instead of being in a horizontal line next to each other). Also on my iPad, the links sections gets shifted to below all the announcements instead of staying in the right side bar.

-Again, depending on the browser/computer, padding/margin is changed around our banner. I would like for our banner to have no padding/margin around it so that the top of the banner creates the top of the page and the sides of the banner run flush with the black of the outside background color.

-When one of our teachers opened up the website in firefox, the whole background turned black, there was no navigation bar, and all wording was blue. She said she opened it in chrome and it looked just fine… so weird. When she looked at it again in firefox later in the day, it was fine again. I’m not sure what is happening there but help with that would be helpful too!

-The website also comes up really large on some computers/browsers… is there a way to make everything a bit smaller so that more of it can fit on a page at once? I would like for people to see at least our banner, homepage slide, and four featured pictures all on one page when the site first pops up (without having to scroll down.

All help with any of these problems is greatly appreciated!