Website Layout changing after browser switching - html

Question

I am a noob in website development. Im trying for a simple website for registration but have no idea how to position the layouts. I am too confused with the div tags.
I have already tried and played a lot with inspect element. After bit of trial and error I was able to position the website properly in chrome browser. However when I switched the browser to firefox and opened the same file, all the layout got changed. I primarily doubt on positioning !the spanning, animated text in my website. It changes position on switching browser.
Any help will be appreciated. Thanks in advance! Im also posting screenshots for both browsers i.e Chrome and Firefox.! In chrome it works fine but not in firefox. Also the rotating text become larger as I reduce the size of viewport
/* Header */
.large-header {
position: absolute;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.demo-1 .large-header {
background-image: url('../img/demo-1-bg.jpg');
background-position: center bottom;
overflow: scroll;
}
.payment {
width: 100px;
height: 100px;
}
.main-title {
display: inline-table;
position: absolute;
margin: 0;
padding: 0;
color: #f9f1e9;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.demo-1 .main-title {
text-transform: uppercase;
font-size: 3.5em;
letter-spacing: 0.1em;
}
.demo-2 .main-title {
font-family: 'Clicker Script', cursive;
font-weight: normal;
font-size: 8em;
padding-left: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.demo-2 .main-title::before {
content: '';
width: 20vw;
height: 20vw;
min-width: 3.5em;
min-height: 3.5em;
background: url(../img/deco.svg) no-repeat center center;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
z-index: -1;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.demo-3 .main-title {
padding: 10px 40px;
border: 10px double #f9f1e9;
text-transform: uppercase;
font-family: Londrina Outline, sans-serif;
}
.demo-4 .main-title {
font-size: 6em;
font-weight: 300;
padding: 10px 30px;
text-transform: uppercase;
color: #222;
}
.main-title .thin {
font-weight: 100;
font-size: 24px;
font-family: initial;
display: table-row-group;
}
#media only screen and (max-width: 768px) {
.demo-1 .main-title,
.demo-3 .main-title,
.demo-4 .main-title {
font-size: 3em;
}
.demo-2 .main-title {
font-size: 4em;
}
}
/*Rotating titles*/
.rw-words {
position: absolute;
text-align: center;
height: 25%;
width: 1140px;
top: 45%;
font-style: cursive;
font-family: serif;
-webkit-perspective: 800px;
perspective: 800px;
}
.rw-words span {
position: absolute;
width: 100%;
height: 50%;
text-align: center;
font-size: 100%;
float: right;
margin-left: -554px;
color: transparent;
margin-top: -13px;
text-shadow: 0px 0px 80px rgba(255, 255, 255, 1);
opacity: 0;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
}
5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg);
}
6% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
17% {
opacity: 1;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
-ms-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
}
5% {
opacity: 1;
-ms-animation-timing-function: ease-out;
-ms-transform: translateY(0px) translateZ(0px) rotateY(0deg);
}
6% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
17% {
opacity: 1;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
transform: translateY(-200px) translateZ(300px) rotateY(-120deg);
}
5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg);
transform: translateY(0px) translateZ(0px) rotateY(0deg);
}
6% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
17% {
opacity: 1;
text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
color: #fff;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 1060px) {
.rw-sentence > span:first-child {
font-size: 500%;
left: 0px;
}
.rw-sentence > span:nth-child(2) {
font-size: 200%;
top: 125px;
left: 30px;
}
.rw-sentence > span:nth-child(3) {
top: 175px;
left: 30px;
font-size: 235%;
}
.rw-words {
left: 95px;
top: 171px;
}
.rw-words span {
font-size: 250%;
}
.rw-sentence > span:last-child {
top: 240px;
left: 30px;
}
}
#media screen and (max-width: 400px) {
.rw-sentence > span:first-child {
font-size: 200%;
left: 0px;
}
.rw-sentence > span:nth-child(2) {
font-size: 100%;
top: 50px;
left: 10px;
}
.rw-sentence > span:nth-child(3) {
top: 76px;
left: 10px;
font-size: 120%;
}
.rw-words {
left: 45px;
top: 76px;
}
.rw-words span {
font-size: 120%;
}
.rw-sentence > span:last-child {
top: 106px;
left: 10px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="http://localhost/Project/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/Project/css/component.css " />
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title" style="font-family: initial;
font-style: initial;">Welcome to NextGen Ticketing <span class="thin" style="font-size:26px font-family:"fantasy" "><br/><font color="white" >Relieve yourself from</font></span>
<div class="rw-words">
<span>Queues</span>
<span>Inconvenience</span>
<span>Chisels</span>
<span>Register Today!</span>
</div> <br/><br/><span class="thin"><br/>Let's get Registered by<br/>Clicking here</span>
<span><p style="font-family: initial;
font-size: x-large;
font-style: normal;
font-weight: 600;">Refill wallet here</p></div></span></h1>
</h1>
Refill wallet here
</div>
</h1>
</div>
</div>
</div>
<!-- /container -->
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
</body>
</html>