Full-Width Sticky Footer, Twenty Twelve Child Theme

I am trying to figure out how to make a full-width footer on a twenty twelve child theme, and I cannot figure it out. I want to have three widgets in the footer centered underneath the page div with a full-width gray background.

I know there must be an easy solution to this, but I’m stuck. What am I doing wrong?

My footer code:

</div><!-- #main .wrapper -->

    <footer id="colophon" role="contentinfo">

		<?php
		    /* footer sidebar */
		    if ( ! is_404() ) : ?>
		        <div id="footer-widgets" class="widget-area three">
		            <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
		                <?php dynamic_sidebar( 'sidebar-5' ); ?>
		            <?php endif; ?>

		            <?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
		                <?php dynamic_sidebar( 'sidebar-6' ); ?>
		            <?php endif; ?>

		            <?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
		                <?php dynamic_sidebar( 'sidebar-7' ); ?>
		            <?php endif; ?>
		        </div><!-- #footer-widgets -->
		<?php endif; ?>

    </footer><!-- #colophon -->

    </div><!-- #page -->

    <?php wp_footer(); ?>
    </body>
    </html>

My CSS:

/* FOOTER
-------------------------------------------------------------- */

	/* make footer full-width
	-------------------------------------------------------------- */
	footer[role="contentinfo"] {
		max-width: 100%;
	}

	#colophon {
		background-color: #7d7d7d;
	}

	/* ===[ Footer Widget Areas ]=== */

	.site-info {
		clear: both;
	}

	#footer-widgets {
		width: 100%;
		border-top: none;
		background-color: #7d7d7d;
	}

	#footer-widgets .widget li {
		list-style-type: none;
	}

	.template-front-page #footer-widgets {
		padding-top: 0;
	}

	@media screen and (min-width: 600px) {
		#footer-widgets.three .widget + .widget + .widget {
			margin-right: 1.71429rem;
			}

		#footer-widgets.three .widget {
			clear: none;
			float: right;
			margin-right: 1.71429rem;
			max-width: 26%;
			width: 26%;
		}
	}

	@media screen and (max-width: 600px) {
		#footer-widgets.three .widget {
			margin-left: 2rem;
			}
		}
	}