What are the best practices for integrating the responsive simulator into pre-existing templates?

With the recent upgrades allowing for responsive simulators, we would like to incorporate this feature into our sites.  However, when we follow the directions for adding responsive simulators to the sidekick on http://dev.day.com/docs/en/cq/current/developing/mobile/responsive.html, we are able to see the correct results (i.e. we can choose different devices for previewing) but the page renderings are unpredictable.  

Unlike, the page component that is used for /content/geometrixx-media/en.html, our core page components were created before this functionality existed and doesn't seem to be properly structured to make use of the simulator.jsp.  We also run into similar issues while trying to add the mobile emulators to our pre-existing templates.  The CSS never seems to render in the simulator or emulator correctly.

Some of our sites are responsive and working correctly in the real world, but just not in the simulator.  For example, when I choose iPhone 4 (or anything with a small width), I see the menus adjust accordingly (for example, the menu disappears and is replaced by a menu icon), but the width of the header continues to fill the browser instead of getting the dark gray side margins indicating a smaller width.

Is this just a question of re-working our CSS?  Perhaps we made some choices that work for some reason on the actual devices but not in the simulator.  We haven't had a chance to develop a new responsive site while using this feature.  Is it expected to work with sites that were developed without the feature enabled?  Any assistance you can recommend would be a great help as I'm sure this feature will come in really handy moving forward.  Thanks!