My web page looks different in Google Chrome and Safari

Here I have two images of the same Web page but in different browsers. Why is it that my web page is laid out correctly in Google Chrome, but when using Safari the error icon is in a different position? How can I fix my code so that my web page looks the same in all browsers? Here is my repository

• Google Chrome
  

• Safari
  

Comments

[sakethk]

Use this css package. It will make css consistent across cross browsers.
npmjs.com/package/normalize.css?ac...

[Chantae P.]

Thank you.

[SJellen]

For the error icon you could use css background-image or background on the input. That will keep it positioned in the input.

[Chantae P.]

Thank you! I'll make sure to try that next time.

[Jon Randy 🎖️]

Looks different between Firefox and Chrome too. As an experiment, I tried adding a CSS reset... and then Chrome and Firefox looked pretty much identical - although there is some stuff that needs fixing. Adding the CSS reset also to Safari makes every almost the same as the other two, but the position of the button is off.

I hope this is vaguely useful

[Celsius Emilio Aray]

The problem is on css. You need or. Css grid or flex. The #btn style is position absolute the margin is on ‘em temporally change for a relative unit % o vw. Boot need refactor to ccs flex or grid for design responsive