Currently, my header has a grey background with a width of 100% and a maximum width of 1000px. To extend the grey background beyond the 1000px limit, I have a separate div with an absolute position behind the header div. The issue arises when the user scrolls horizontally, causing the grey background to only extend as wide as the browser window, leaving the rest of the area with a white background. Is there a way to make the grey background span the full width of the screen, even with horizontal scrolling?
For a visual representation of the issue, please refer to this JSFiddle: https://jsfiddle.net/mb1brnma/1/
The content within the fiddle may appear disorganized, but it mirrors the problem of the background not extending fully to the right when scrolling.
Update:
HTML:
<div id="footerTopBG"></div>
<div id="footerBG"></div>
<body>
<div id="footer-container">
<div id="footer-holder">
<footer>
<section id="mid">
<div align=left class="box">
<h5>Customer Care</h5>
<ul>
<li><a href="/pages/Return-Policy.html">Return Policy</a></li>
...
CSS:
footer {
width: 100%;
max-width:900px;
min-width:770px;
float: left;
height:310px;
background: linear-gradient(to bottom, #9b9b9b 61.2%,#414141 61.2%);
}
...