I am new at web development and facing some problem in creating a web page. Actually, I was creating a loading bar animation at the top of the window and set its width to 100vw
but it is taking more space than it should take. Here's a picture to demonstrate:
As you can see in the top-right corner it is overflowing the window. Why is that so?
Here's my code:
<!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>Loading Bar</title>
<style>
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
Thanks in advance!!