why is the layout of my website different on mobile? - html

Question

I'm trying to make a simple website for a homework.
This is how the site looks like on google chrome.
At first, I used px instead of '%' for my website, then changed it because turned out it looked different on different browsers. After I used '%', I was satisfied because it looked the same, but then I tried to open it on my phone's google chrome and this is how it looks
I tried using the meta viewport, but that only made it worse. All the element overlaps with each other. My friends didn't use any media queries and their sites still looked alright on both mobile and desktop (fonts looked smaller and everything, but the layout was still alright).
here's the css code:
<style>
.header{
background-image: url("https://www.blibli.com/friends/assets/masakan-indonesia-featured-696x464.jpg");
position: absolute;
height: 25%;
width: 99%;
text-align: center;
filter: blur(2px);
-webkit-filter: blur(2px);
}
.headertext{
font-family: Bebas Neue;
font-size: 4.5em;
top: 7%;
left: 28%;
position: absolute;
color: white;
z-index: 1;
text-decoration: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: chocolate;
overflow: hidden;
position: absolute;
width: 99%;
top: 26.5%;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 1% 9.92%;
text-decoration: none;
font-size: 1.373em;
font-family: Roboto;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
.sidebar{
width: 20%;
height: 107%;
float: left;
display: block;
top: 40%;
position: absolute;
background-color: rgba(148, 145, 141, 0.37);
}
.main{
width: 76.3%;
height: 220%;
display: block;
position: absolute;
top: 40%;
left: 23%;
background-color: rgba(148, 145, 141, 0.37);
}
.box{
border:1px solid red;
position:absolute;
width:80%;
height:22%;
left: 5%;
transition: 0.2s;
}
.box:hover{
transform: scale(1.05);
}
.top{
top: 3%;
}
.middle{
position: absolute;
top: 31%;
}
.bottom{
position:absolute;
bottom:19%
}
.picture{
object-fit: cover;
width: 50%;
height: 85%;
position: absolute;
top: 7.5%;
left: 3%;
}
.text {
width: 40%;
height: 80%;
position: absolute;
top: 7.5%;
right: 4%;
font-family: Roboto;
font-size: 0.9em;
text-align: justify;
}
.judul{
font-family: Bebas Neue;
font-size: 1.6em;
line-height: 2;
letter-spacing: 0.3em;
}
.link{
bottom: 0px;
position: absolute;
font-family: Roboto;
font-size: 0.7em;
}
.button{
text-decoration: none;
display: inline-block;
padding: 1.5% 10%;
position: absolute;
bottom: 7%;
left: 35%;
font-family: Roboto;
font-size: 1.2em;
}
.button:hover{
background-color: white;
color: black;
}
.more{
background-color: chocolate;
color: white
}
.rekomendasi{
display: block;
position: absolute;
width: 96%;
height: 5%;
font-size: 1.8em;
font-family: Bebas Neue;
padding: 2%;
background-color: chocolate;
text-align: center;
letter-spacing: 0.1em;
color: white;
}
.rekomendasicontent{
position: absolute;
top: 85%;
font-size: 0.6em;
text-align: left;
font-family: Roboto;
letter-spacing: 0em;
color: black;
line-height: 160%;
}
.populer{
display: block;
position: relative;
top: 49%;
width: 96%;
height: 5%;
font-size: 1.8em;
font-family: Bebas Neue;
padding: 2%;
background-color: chocolate;
letter-spacing: 0.1em;
color: white;
text-align: center;
}
.populercontent{
font-size: 0.6em;
text-align: left;
font-family: Roboto;
letter-spacing: 0em;
position: absolute;
top:85%;
color: black;
line-height: 160%;
}
.link2{
color: black;
text-decoration: none;
background-color: none;
}
li{
transition: 0.2s;
}
li:hover{
transform: scale(1.1);
}
.footer{
width: 97.8%;
position: absolute;
top: 260%;
background-color: chocolate;
font-family: Roboto;
font-size: 1em;
color: white;
text-align: center;
padding: 0.5%;
}
</style>