My website features a scrolling div element that spans 100% of the screen, but I am encountering an issue with slight horizontal scrolling and the background image extending beyond the visible area.
I am striving to adjust the width of the div so that it perfectly matches the screen size without any unnecessary horizontal scrolling on the far right side of the page.
https://i.stack.imgur.com/sOwUU.gif
Below is the HTML code snippet:
<body>
<div class="summaryPanel">
<p>Summary</p>
</div>
</body>
And here is the corresponding CSS code:
body {
position: relative;
background-image: url(../images/trees.jpeg);
background-color: white;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: -2;
}
.summaryPanel {
position: absolute;
top: 10vh;
z-index: -1;
height: 100vh;
width: 100vw; // I also tried "100%"
background-color: #242A31;
border-top: 3px solid rgb(74, 74, 74);
}