Make Background Color Extend into Overflow Area

Extend background-color of header beyond container with css

You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.

#container {    width: 100px;    margin: 0 auto;    background-color: #FFFFCC;}.stripe {    background-color:#CCFFFF;    height: 100px;    position: relative;}.stripe:before {    content:"";    background-color:#CCFFFF;    position: absolute;    height: 100%;    width: 4000px;    left: -2000px;    z-index: -1;}

<div id="container">  <div>one</div>  <div class="stripe">two</div>  <div>three</div></div>

Overflow content background-color not expanding

Just remove this line from actual-content class

left: 0;
right: 0;

And remove overflow:hidden from body.

How to have a background extend indefinitely in the x direction

Okay, so, working off your fiddle, we can see that the problem isn't that the background color doesn't stretch to 100% the width of the page, but rather that the elements in your footer add up to over 100%! So the only way to get the background color to truly take up the whole page is to either A.) provide some parent element that truly contains all its children, and giving that the background color instead; or, B.) set whatever it is that has the background color to be bigger than 100% of the page width (or at least stick out beyond the right bound of the page).

The first option below works around approach A; the second option is based around approach B; the third option is just bonus points. Make sure to resize the screen on both of them to see how they compare at wide vs narrow screen sizes.

To start, here are our problem styles:

footer {
  min-width: 770px;
}
footer #mid {
  min-width: 720px;
}
footer #bottom {
  min-width: 720px;
}

Also, you should not include any elements outside your <body> tag, besides the <head>. That is not valid HTML. But we do not actually need <div id="footerTopBG"> or <div id="footerBG"> in this case, so I have simply commented them out in the following examples (in addition to deleting the body and html tags you had, which are not necessary in a fiddle or in a stack snippet).

Option 1: parent element scrolls

The first approach is to set the background color on the wrapper element, and make sure that element's min-width is wide enough to truly contain everything.

#footer-container {
  background-color: #9b9b9b;
  min-width: 900px;
  overflow-x: auto;
}

You'll basically want to make that min-width value as small as possible, to prevent excess scrolling on small screens. The precise value will be determined by your font sizes and font faces, and the child elements' widths and margins and whatnot.

Option one:

footer {  width: 100%;  max-width: 900px;  min-width: 770px;  float: left;  height: 310px;}footer #mid {  width: 96%;  margin: 2%;  float: left;  position: relative;  display: inline;  max-width: 900px;  min-width: 720px;}footer #mid .box {  width: 25%;  overflow: visible;  float: left;  width: 25%;}footer #mid .box h5 {  overflow: hidden;  font-size: 18px;  /* position: absolute; */  color: white;  font-weight: bold;}footer #mid .box ul {  width: 170px;  margin-top: 20px;  float: left;  position: relative;}footer #mid .box ul li a {  color: white;  display: inline-block;  padding-top: 10px;}footer #mid .box FM li a {  display: inline;  font-size: 23px;  padding-top: 0px !important;}footer #mid .box FM li a:hover {  font-size: 25px;}footer #mid .box FM .one {  position: absolute;  text-align: right;  right: 120px}/* footer #mid .box FM .two {  position: absolute;  text-align: left;  left: 58px;} */footer #mid .box FM #B {  bottom: -30px;}footer #mid .box FM #A {  bottom: -5px;}footer #mid .box FM #A li:hover {  transform: translateY(-5px);}footer #mid .box ul li a:hover {  color: #ccc;  transform: translate(2%);}#af-form-2011966506 {  float: left;  margin-left: -60px;  padding: 8px;  /* overflow: visible; */  border: 1px solid white;}#awf_field-79641790 {  width: 100%;  text-align: center;  vertical-align: middle;  background-color: white;  border-radius: 2.5px;}footer #bottom {  width: 100%;  max-width: 900px;  min-width: 720px;  height: auto;  float: left;  color: ghostwhite;  margin: 10px 2%;  display: inline;}footer #bottom address {  width: 26%;  margin-right: 50px;  float: left;  font-style: normal;}footer #bottom .big {  color: whitesmoke;  font-family: 'TeXGyreAdventor', sans-serif;  font-weight: bold;  font-size: 18px;}footer #bottom address a {  color: deepskyblue;}footer #bottom address a:hover {  color: skyblue;}footer #bottom .phone {  margin: 0;  width: 30%;  min-width: 230px;  float: left;}footer #bottom .phone a {  color: deepskyblue;}footer #bottom .phone a:hover {  color: skyblue;}footer #bottom .hours {  margin-left: 50px;  float: left;  width: 26%;}footer #bottom .copy {  width: 100%;  margin-top: 10px;  float: left;  text-align: center;  font-family: "Trebuchet MS";  color: whitesmoke;  font-size: 12px;}/* NEW */body {  margin: 0;}#footer-container {  background-color: #9b9b9b;  min-width: 900px;  overflow-x: auto;}

<!-- <div id="footerTopBG"></div><div id="footerBG"></div> --><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>            <li><a href="/free-shipping.html">Free Shipping*</a></li>            <li><a href="/pages/Terms-And-Conditions.html">Terms & Conditions</a></li>            <li><a href="/pages/Privacy-Statement.html">Privacy Statement</a></li>            <li><a href="/pages/FCC-Wireless-Alert.html">FCC Wireless Alert</a></li>          </ul>        </div>        <div align=left class="box">          <h5>More About NLFX</h5>          <ul>            <li><a href="/pages/About-us.html">About Us</a></li>            <li><a href="http://gobos.nlfxpro.com">NLFX Pro Custom Gobo</a></li>            <li><a href="/pages/Installations.html">Installations</a></li>            <li><a href="/pages/Blog.html">Blog</a></li>          </ul>        </div>        <div align=left class="box">          <FM>            <h5>Follow NLFX</h5>            <ul id="A">              <li class="one"><a href="https://www.facebook.com/nlfxpro/"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>              <li class="two"><a href="https://twitter.com/NLfxPro?ref_src=twsrc%5Etfw"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>            </ul>            <ul id="B">              <li class="one"><a href="https://www.youtube.com/user/NLFXProfessional?feature=sub_widget_1"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>              <li class="two"><a href="https://www.instagram.com/nlfxpro/?hl=en"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>            </ul>          </FM>        </div>        <div align=left class="box">          <div id="af-form-2011966506" class="af-form">            <div id="af-header-2011966506" class="af-header">              <div class="bodyText">                <p style="text-align: center;"><span style="font-size: 18px;white-space=nowrap;"><strong style="color: whitesmoke;">Newsletter signup!</strong></span></p>              </div>            </div>            <div id="af-body-2011966506" class="af-body af-standards">              <div class="af-element">                <div class="af-textWrap">                  <input id="awf_field-79641788" type="text" name="name" class="text" value="" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="500" placeholder="Your Name">                </div>                <div class="af-clear"></div>              </div>              <div class="af-element">                <div class="af-textWrap">                  <input class="text" id="awf_field-79641789" type="text" name="email" value="" tabindex="501" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " placeholder="Email Address">                </div>                <div class="af-clear"></div>              </div>              <div class="af-element">                <div class="af-selectWrap">                  <select id="awf_field-79641790" name="custom Your Interests" tabindex="502">                    <option selected="selected" class="multiChoice" value="">Select an Interest</option>                    <option class="multiChoice" value="Dj">DJ</option>                    <option class="multiChoice" value="House of worship">House of Worship</option>                    <option class="multiChoice" value="Family fun center">Family Fun Center</option>                    <option class="multiChoice" value="Live Production">Live Production</option>                    <option class="multiChoice" value="Performance venue">Performance Venue</option>                    <option class="multiChoice" value="Rental company">Rental Company</option>                  </select>                </div>                <input type="hidden" name="meta_preselected_awf_field-79641790" value="---select one---">                <div class="af-clear"></div>              </div>              <div class="af-element buttonContainer">                <input name="submit" class="submit" type="submit" value="     Subscribe to our Newsletter!     " tabindex="503">                <div class="af-clear"></div>              </div>            </div>          </div>        </div>      </section>      <section id="bottom">        <address>                    <p class="big">NLFX Professional</p>                    <p>1319 Naylor Drive SE</p>                    <p>Bemidji, MN 56601</p>                    <p><a href="https://www.google.com/maps/place/NLFX+Professional/@47.4419595,-94.8508662,17z/data=!3m1!4b1!4m5!3m4!1s0x52b82dc7d2024257:0xd700f2707b61b267!8m2!3d47.4419559!4d-94.8486775" target="_blank">View Map</a></p>                </address>        <div class="phone">          <p class="big">Contact Us</p>          <p>Toll Free: 1-888-660-6696</p>          <p>Local: 218-444-2994</p>          <p>Email: <a href="mailto:customercare@nlfxpro.com">customercare@nlfxpro.com</a></p>        </div>        <div class="hours">          <p class="big">Store Hours</p>          <p>Monday - Friday</p>          <p>8:30am - 5:00pm</p>        </div>        <div class="copy">          Copyright © 2012 NLFX Professional        </div>      </section>    </footer>  </div></div>

CSS overflow culls background-color

Try float:left on the .codeblock pre. Works in Firefox.

<pre> fits itself inside the .codeblock container like there was no more room. float makes your <pre> element wide just enough to fit its content.

UPDATE

.codeblock pre {
    float: left;
    min-width: 100%;}

Works in Firefox, Opera, IE9 and WebKit

As far as I understand, it elements inside a container with overflow:auto fit themselves inside the area that's visible by default. Those elements' width:100% is only as wide as the outer container. In this example inside of the inner container you have a code tag that doesn't break lines so the text goes outside the inner container and makes the outer container show scrolls. To avoid that, you need the inner container to fit its content hence float:left.

But, as you cleverly noticed (and I didn't), this way it won't expand if the outer container is wider than the code so to avoid that you need to put min-width:100% to make the inner container use at least all the visible space inside the outer container.

Extending Navbar BG color outside of container

I propose a solution using pseudo-classes :before and :after for class .container-nav. Do the following:

Add position: relative; to .container-nav.

And add these pseudo-classes with absolute positioning to your css.

html,
body {
    background-color: #ededed;
    margin: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: yellow;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 5px;
}

li a:hover:not(.active) {
    background-color: white;
}

.active {
    background-color: white;
}

.container-main {
    display: grid;
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
}

.container-main > div {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    text-align: center;
    font-size: 30px;
}

.container-nav {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
    position: relative; /*add this it*/
}

/*add this it************/

.container-nav:before {
    content: "";
    position: absolute;
    left: -100%;
    bottom: 0;
    top: 0;
    right: 100%;
    background-color: yellow;
}

.container-nav:after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    top: 0;
    right: -100%;
    background-color: yellow;
}

<body>
    <div class="container-nav">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <div class="container-main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

How to make page background color extend everywhere, even below the page?

Place the background-color rule to the html element also as:
html { background-color: #5C5957; }