After implementing a video as the background of my HTML project, I noticed some margins appearing on the right side of the header and footer. Despite following advice to set "margin: 0" in my CSS for the Body element, the issue persists.
You can view the image link in the top right corner of the header.
https://i.sstatic.net/wBauP.jpg
I should note that this problem only occurs on this specific page after adding the video. Other pages do not exhibit this behavior.
.homepage_bg_video-container{
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
background-color: black;
}
.homepage_bg_video-container video{
opacity: 0.4;
position: absolute;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#rights{
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: rgba(13, 13, 13, 0.9);
height: 60px;
padding-top: 1px;
color: #ece5ea;
border-top: #070606 1px solid;
}<div class="homepage_bg_video-container">
<video autoplay loop muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<footer>
<div id="rights">
<p>Nits.SRL - Toate drepturile rezervate © 2019</p>
</div>
</footer>