My Responsive Scrollabe demo is behaving weird, and I have absolutely no idea why

My front page background images fits to screen perfectly on all ranges of sizes, but when the screen width is smaller than 960 px, and larger than 700 px, images fail to fit to its parent div container.

I have a media query @ max-width: 700px to set my frontpage’s container div’s height to auto, so that it fits to phone screens.
And another media query @max-width: 960px to make my text paragraphs fit to page.
I’ve been trying to fiddle with my css but nothing happened…

Anyone else who’s dealt with similar issues? I’m wondering what should I be looking for in my codes to troubleshoot this. I haven’t noticed anything wrong yet…