I am having an issue in my program in which after I click one of the list items (in this case option 1) and go to the linked page, when I return back to the original page (through Google's return arrow), everything on the original page starts moving to the left and the color of the page starts to get overwritten. And each time I click and go back, it gets worse. This is illustrated below.
Original Look
After Clicking/Returning Back From Linked Page Multiple Times
I have no clue why this is happening. I noticed when I make Option 1 just a link and not a list element the problem disappears but I want to be able to style it as a list element.
First Page Code
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<head>
<title></title>
<style>
body{
margin: 0;
padding: 0;
background: linear-gradient(315deg, #ffffff 0%, red 74%);
font-family: sans-serif;
overflow-x: hidden;
}
ul{
position: relative;
width: 450px;
margin: 100px auto 0;
padding: 10px;
box-sizing: border-box;
}
ul li{
display: flex;
background: rgba(255, 255, 255);
padding: 10px 20px;
border-radius: 5px;
border: 0.3rem solid red;
margin: 5px 0;
transition: .5s;
cursor: pointer;
color: red;
font-family: 'Work Sans', sans-serif;
font-weight: 500;
}
h1{
transform: translate(350px, 45px);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: white;
}
.top{
margin-left: 180px;
margin-bottom: -25px;
font-weight: 900;
font-size: 45px;
}
.c1{
transform: translate(140px, -5px);
font-size: 25px;
}
.c2{
transform: translate(135px, -10px);
font-size: 25px;
}
.one{
transform: translate(0px, -50px);
}
.two{
transform: translate(0px, -110px);
}
h2{
visibility: hidden;
}
ul li:hover{
transform: scale(1.06);
}
</style>
</head>
<body>
<h1 class="top">Options</h1>
<h2>Select a Category Below</h2>
<ul class="one">
<h1 class="c1">Category 1</h1>
<li><a href="sindex.html">Option 1</a></li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<ul class="two">
<h1 class="c2">Category 2</h1>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<section class="f">
<span>BLUE</span>
</section>
</body>
Second Page Code
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: aqua;
}
.head{
text-align: center;
transform: translateY(150px);
font-size: 30px;
}
.but{
display: flex;
justify-content: center;
transform: translateY(160px);
}
.btn1{
border-radius: 5px;
width: 200px;
height: 45px;
font-size: 17px;
outline: none;
background-color: #fff;
border: 1px solid #5555;
cursor: pointer;
}
</style>
</head>
<body>
<div class="head">
<h1>Click Below</h1>
</div>
<div class="but">
<a href="designtest.html"><button class="btn1">Generate</button></a>
</div>
</body>