the body is not stretched to the edge - css

Question

so I'm creating a website and it's so important for me to finish it in time but I hit a problem that creates an annoying bug in android that that makes the body not stretch to the end of the page
here's how to remake this bug:
run the code that I will put below
go to Devtools
turn on mobile mode
heres the code :
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
document.getElementById("buy-id").addEventListener("click", function() {
localStorage.clear()
localStorage.setItem("buy-item", "id");
window.location.href = window.location.href + "/buy-gem-list";
});
document.getElementById("buy-details").addEventListener("click", function() {
localStorage.clear()
localStorage.setItem("buy-item", "details");
window.location.href = window.location.href + "/buy-gem-list";
});
#font-face {
font-family: yekanbakh;
font-style: normal;
font-weight: 100;
src: url(fonts/yekan-bakh-regular.ttf) format("truetype")
}
* {
font-family: yekanbakh;
font-weight: 400;
box-sizing: border-box;
margin: 0;
}
body {
background-color: #e5e4f3;
width: 100%;
}
.navbar {
display: flex;
flex-direction: row;
position: sticky;
justify-content: center;
padding: 1em;
background-color: rgb(252, 244, 244);
box-shadow: 0 0 4px black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.navbar>span {
font-size: 40px;
font-weight: 550;
}
.navbar>.logo {
display: inline-block;
width: 55px;
height: 55px;
background: url("./images/logo.png");
background-size: 56px;
border-radius: 500%;
margin-right: 10px;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
margin-top: 2em;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #161616;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #020202;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.buy {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.buy>span {
font-weight: bold;
font-size: 20px;
}
.buy>.items {
display: flex;
justify-content: center;
}
.buy>.items>.item {
width: 75px;
height: 75px;
margin: 0 3px;
background-color: rgb(204, 102, 102);
border-radius: 50%;
cursor: pointer;
background-image: url("images/gem.png");
background-repeat: no-repeat;
background-size: 75px;
}
.buy>.items>.item:hover {
background-color: rgb(223, 68, 68);
}
.social {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.social>span {
font-weight: bold;
font-size: 20px;
}
.social>.items {
display: flex;
justify-content: center;
padding: 1em;
}
.social>.items>.item {
cursor: pointer;
display: flex;
flex-direction: row;
margin: 0 7px;
background-color: #ccc;
padding: 1em;
border-radius: 15px;
}
.social>.items>.item>a {
color: white;
text-decoration: none;
}
.social>.items>.item:hover {
background-color: rgb(126, 107, 107);
}
.whatsapp-link {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.whatsapp-link>span {
font-weight: bold;
font-size: 20px;
}
.whatsapp-link>.items {
display: flex;
justify-content: center;
padding: 1em;
}
.whatsapp-link>.items>.item {
cursor: pointer;
display: flex;
flex-direction: row;
margin: 0 7px;
background-color: #ccc;
padding: 1em;
border-radius: 15px;
}
.whatsapp-link>.items>.item>a {
color: white;
text-decoration: none;
}
.whatsapp-link>.items>.item:hover {
background-color: rgb(126, 107, 107);
}
.footer {
margin-top: 3em;
text-align: right;
background-color: #fff;
padding: 55px;
}
.footer>.about {
padding: 15px;
}
.footer>.about>span {
font-weight: bold;
font-size: 17px;
}
.footer>.about>p {
margin-right: 1.5em;
}
.footer>.copyright {
font-weight: 900;
text-align: center;
color: rgb(225, 10, 10);
}
.itemss {
margin: 3em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 15px;
direction: rtl;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #ccc;
}
.itemss>.item {
margin: 1.25em;
padding: 0.5em;
border: 3px solid #bbb;
background-color: #bbb;
border-radius: 10px;
}
.itemss>.item>.title {
font-weight: bold;
font-size: 20px;
}
.itemss>.item>.price {
font-weight: 600;
color: darkgreen;
}
.itemss>.item>.btn-buy {
padding: 0.5em;
border-radius: 5px;
background-color: rgb(243, 54, 54);
text-align: center;
cursor: pointer;
color: white;
}
.itemss>.item>.btn-buy>a {
text-decoration: none;
color: white;
}
.itemss>.item>.btn-buy:hover {
background-color: rgb(197, 59, 59);
}
.itemss>.item>.gem {
width: 100px;
height: 100px;
background-image: url("../images/gem.png");
background-repeat: no-repeat;
background-size: 100px;
}
.instagram {
width: 25px;
height: 25px;
background-size: 25px;
border-radius: 3px;
background-image: url("./images/instagram.png")
}
.telegram {
width: 25px;
height: 25px;
background-size: 25px;
border-radius: 50%;
background-image: url("./images/telegram.jpg")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viva Shop - فروش جم فیری فایر بسیار ارزان</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="./script.js" defer></script>
<meta name="theme-color" content="#5f72da">
<meta name="description" content="شرکت اینترنتی ویوا شاپ جزو بزرگترین فروشگاه های فروش جم بازی کامپیوتری فیری فایر است که کلی محصول با قیمت ارزان دارند">
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
</head>
<body>
<div class="navbar">
<div class="logo"></div>
<span>ویوا شاپ</span>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-- <center><img src="images/bannner.png"></center> -->
<div class="buy">
<span>خرید جم</span>
<div class="items">
<div class="item" id="buy-details">
با اطلاعات
</div>
<div class="item" id="buy-id">
با آیدی
</div>
</div>
</div>
<div class="social">
<span>لینک فضای مجازی</span>
<div class="items">
<div class="item">
<div class="telegram"></div>
تلگرام
</div>
<div class="item">
<div class="instagram"></div>
اینستاگرام
</div>
</div>
</div>
<div class="whatsapp-link">
<span>لینک چنل های واتساپ</span>
<div class="items">
<div class="item">
شعبه 1 واتساپ
</div>
<div class="item">
شعبه 2 واتساپ
</div>
<div class="item">
شعبه 3 واتساپ
</div>
<div class="item">
شعبه 4 واتساپ
</div>
<div class="item">
شعبه 5 واتساپ
</div>
</div>
</div>
<div class="footer">
<!-- <div class="support">
<p>برای تماس با شرکت ویوا شاپ متن پیغامتان را وارد کنید</p>
<div class="inputbox">
<input type="text" name="text-msg" id="support-msg-text">
<div class="submit" id="support-btn-submit">ثبت</div>
</div>
</div> -->
<div class="about">
<span>
درباره ویوا شاپ
</span>
<p>
ویوا شاپ یکی از بزرگ ترین فروشگاه های آیتم های قابل خرید بازی کامپیوتری فیری فایر است که تا کنون بیش از 100 مشتری داشته است و 6 شعبه در واتساپ دارد
</p>
</div>
<hr>
<div class="copyright">
© تمام حقوق این وبسایت متعلق به ویوا شاپ است و هرگونه کپی برداری پیگرد قانونی دارد
</div>
</div>
</body>
</html>
you will get a headache looking at the code
please help me i want to fix it fast