so the padding of my input and text area apparently wont display except when i open the page and save the css file deliberately, it will immediately have my padding settings, however when im directed from another page to that page it will show zero padding. here's the css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#bg {
background-color: #264d7c;
}
.title {
font-weight: 800;
margin: auto;
text-align: center;
font-size: 3rem;
color: white;
}
.mainform {
margin-left: 3rem;
flex-direction: column;
justify-content: space-evenly;
align-items: start;
display: flex;
gap: 20px;
}
input,
textarea {
background-color: #264d7c;
border: solid white;
color: white;
padding: 15px;
}
.submit {
font-weight: 600;
color: white;
padding: 10px 30px;
border-radius: 30px;
border: solid white;
}
.texts {
color: white;
font-weight: 600;
}
.wrappertable {
margin-top: 2rem;
}
table,
th,
td {
border: solid black;
padding: 20px;
border-collapse: collapse;
text-align: left;
font-size: 1.3rem;
width: 20%;
margin: auto;
}
th {
font-weight: 500;
}
.legend {
font-weight: 700;
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thalation | Cakradhana Nawasena</title>
<link rel="icon" type="image/x-icon" href="/bahan/simple.png">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="thalation.css">
<script src="./hamburger.js" defer></script>
<script src="https://web3forms.com/client/script.js" async defer></script>
</head>
<body>
<!-- Form part -->
<div class="wrapperform">
<!-- action="https://api.web3forms.com/submit" method="POST" -->
<form class="mainform">
<span class="texts">Nama (apabila ingin anonim isi '-')</span>
<input type="hidden" name="access_key" value="3c883bb7-c619-430f-b6c6-eac06e9f62d1">
<input type="text" placeholder="Your name" name="Name" class="name">
<span class="texts">Aspirasi</span>
<textarea class="aspirasi" placeholder="Tuliskan aspirasimu" name="Aspirasi" id="Aspirasi" cols="30" rows="10"></textarea>
<button class="submit" type="submit">Kirim</button>
</form>
</div>
</body>
</html>I've only tried to refresh and refresh using two devices, it ended up the same. Here's an image describing what's wrong:
