Responsive design

I was building a few landing pages, few days ago(it is still in the works), and if I'm honest writing the CSS rules for responsive design is kind of a pain after writing the desktop version, so I decided to do the responsive part first and then code the desktop version of the page. While I was writing the CSS rules for a 767px breakpoint(i was testing it on Chrome developer edition) everything was going fine-ish(i hate that it has a few selections of devices to use as a viewport) until I thought, "hey! what about firefox?, what does it look like in/on Firefox", I launched Firefox developer edition and I was greeted with the horrible and disgusting horizontal overflow,so my responsive effort was a fail(at least in Firefox) but in chrome it was not there, I tweaked it a little bit while i viewed the page in Firefox, and it was fine, went back to chrome everything was squished together, and changing device viewports did not help matters. So I learned both browsers have issues rendering margins and paddings because I realized it was margins that push them off the x-axis of the screen or squished everything together. So my question is how do you test your website to make sure it is "responsive ready"? Do you use the browser's responsive mode or do you use a different tool?

PS I know this is long, forgive me, I wanted to tell a story to ease my mind because I was frustrated after spending a good amount of time working on the page in Chrome only to be disappointed in Firefox.