How can I make my CSS code compatible with all browsers?

Question

My project works very well in Chrome but in Mozilla doesn't. In some places, for exemplo my <footer> change and the size of the <form> also.

[my code is here: https://codepen.io/jugrigori/full/wyGaNV/]

[css to device extra small]

@import url('https://fonts.googleapis.com/css?family=Dancing+Script');

body{
background-color: rgb(87, 87, 87);
}

/**
*navbar
**/

.navbar{
font-size: 20px;
}

.navbar-brand{
font-family: 'Dancing Script', cursive;
font-size: 30px;
}

#about, #portfolio, #contact{
background-color: rgba(0, 0, 0, 0.658);
color: white;
}

/**
* about
**/

p.citacao{
font-family: 'Dancing Script', cursive;
font-size: 33px;
text-align: center;
padding-top: 100px;
}

.div-background{
background-image: url(https://image.ibb.co/meyGB6/small.png);
background-size: 100% 100%;
height: 40px;
margin-bottom: 5px;
}

p.career{
font-size: 20px;
text-align: center;
}

#about .img-perfil{
display: block;
margin: auto;
padding-top: 15px;
width: 112%;
height: 45%;
margin-bottom: 75px;
}

/**
* portfolio
**/

#portfolio h1{
text-align: center;
}

#portfolio p{
margin-top: 30px;
text-align: justify;
font-size: 18px;
}

#portfolio img{
width: 100%;
height: 50%;
display: block;
margin: auto;
}

/**
*contact
**/

#contact h1{
text-align: center;
}

#contact form{
margin-top: 70px;
}
#contact form input{
width: 150px;
font-size: 25px;
margin-bottom: 2px;
border: none;
display: block;
margin-left: auto;
margin-right: auto;
}

#contact textarea{
width: 150px;
font-size: 25px;
border: none;
display: block;
margin-left: auto;
margin-right: auto;
}

#contact button{
display: block;
margin: auto;
margin-bottom: 50px;
}

/**
* footer
**/

footer p{
color: white;
font-si

Answer 1

Read through this website it will help u understand a lot about cross-browser

https://techbrij.com/7-tips-to-make-your-website-cross-browser-compatible

Answer 2

That's a problem that has been seen throughout the web (I even had previously heard about different stylesheets depending on browsers)

Btw, you can use tools like https://caniuse.com to verify that the features you are using are compatible between browsers. You can also share your code here and that way someone else can suggest changes to keep the style and make it compatible between browsers

Answer 3

thanks a lot guys! :)