This is asked over and over again (with different combinations of browsers and rendering engines). But there's not really an answer. Instead, here are a few things to keep in mind to make your work look more similar across MOST popular browsers and devices.
One
There's no such thing as complete pixel perfection. Period. Even if you manage to get hit a point where a screenshot laid over the top of the source material (Photoshop, Sketch, etc) is exactly perfect, you could go to a different computer (same browser and source material) and not have it line up. But even that's unlikely as something like a Photoshop file by definition can't be responsive.
Two
You CAN level the playing field to make most browsers treat your code similarly. To do this, you need to understand that each browser has different defaults and then REMOVE those defaults so that your CSS represents the final solution. There are two typical ways to do this:
CSS Resets - these remove ALL styling and force you to build up everything.
CSS Normalize - which attempts to make the base styling THE SAME across all browsers. (I use a normalize in EVERY project I do)
Three
Learn about the CSS box-model. The relates to how browsers deal with the "boxes" of margin/padding/content that make up a rendered HTML page. The box model a browser is using, impacts sizes and spacing. A Normalize will typically fix this, but many browsers use different box models by default.
It's also worth paying attention to screen pixel densities (this impacts anything with fixed sizes) and converting to percentage-based sizing (rem, vh/vw, %) so that all devices start to render things as close to what you wanted as possible.
Four
Get to know each browser's capabilities and plan fallbacks or shims to restore/add functionality in those cases. First, check what you're trying to use with caniuse.com This will tell you if you need to use a fallback, detect missing features or just accept the fact that it won't work exactly like you want it to everywhere.
