Margin being created only in non webkit browsers

Is it when you click on the menu button and it brings out that blue menu on the side? I tested it in Firefox, Safari, Chrome on my Macbook Pro 13" and I noticed in Firefox the hidden menu items are right up against the edge of the browser window where on the other two browsers they had some space so it looked pretty good. So if it were me I would put more spacing in firefox.

As far as targeting specific browsers I would suggest first of all making sure you use a css reset to start. Sometimes that doesn't catch all of it so I would use an in browser debugging program like Developer Tools for Chrome, Firefox has Firebug and Web Developer tools in the browser. I don't use Safari or IE so I don't know what tools they have but if they don't have dev tools built in there are most likely 3rd party apps and extensions you can install. When I made my wedding website I noticed that it was not doing the same thing across browsers so I used those tools and found out that webkit browsers added extra margins to my layout despite the reset. These were css classes that webkit browsers add by default (under user agent stylesheet) so I made a class in my main css file that would turn that off and it worked.

There are also css tricks and hacks out there that will allow you to target specific browsers. Some of these are a bit confusing. And if you care about code validation and semantic, some of these are not so be aware of that.

Finally, in reality you are not going to get it to be correct and consistent on every browser for every device. Just make sure that you know your target audience and make sure that it definitely works for them.

Some suggestions on what could make it better.

It would be more helpful to provide screenshots of what it is supposed to look like and what it is actually working. And samples of the code that you have that controls it would be nice.

I only see the scroll bar because your side menu is taking up the entire height of the webpage so since your webpage is longer than most browser windows I think that is where the scrollbars are coming from. So I would possibly see if making it display: fixed; and set up a fixed height and width. Try changing the overflow property to either visible or hidden and see what that does. Try looking up other websites that have that type of menu and replicate their code.

A few things I noticed. When the screen is resized to a smaller view the logo on the bottom gets huge and it is extremely pixelated. I would make sure you serve up an image that is the proper size and resolution when it gets to that view or give it a max width of something small so people won't see the pixelation.

It would also be helpful if you put a button on that sidebar menu that would turn it off and go back to the page. If you resize the browser and you are viewing from a tablet or phone, when people click your menu it takes up the entire width of the page and then you can't go back. Also you have that same menu below the image on the right side. So is that really necessary?

I hope this is helpful to you in some way.