Full-width footer

Hi!

I’m trying to make my footer full-width, but with no succes. Could anyone help me out?

CSS:

/************************************************
*	20.	Footer  								*
************************************************/

.footer {
	margin: 12px auto 0px;
	width: 100%;
	padding: 0px;
	overflow: hidden;
	}
.footer .align-left {
	font-size: 0.9em;
	line-height: 1.8;
	}
.footer-widgets {
	background: #000000;
	overflow: hidden;
	}
.footer-widgets .widget {
	float: left;
	width: 25%;
	background: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	}
.footer-widgets .widget li {
	border-top: 1px solid rgba(255,255,255, .2);
	}
.footer-widgets .widget .footer-widget {
	padding: 12px;
	}
.footer-widgets .widget h6 {
	color: #FFFFFF;
	}
.footer-widgets .widget a {
	color: #999999;
	}
.footer-widgets .widget a:hover {
	color: #FFFFFF;
	}
.footer-widgets .textwidget {
	padding: 0px 18px;
	}
.footer-information {
	background: #242424;
	padding: 12px;
	overflow: hidden;
	}
.footer-information p {
	margin: 0px;
	padding: 0px;
	}
.footer-content {
	max-width: 1056px;
	margin: 0px auto 0px;
	}
.footer-content a {
	color: #999999;
	}

footer.php:

<?php
/**
* The footer for our theme.
* This template is used to generate the footer for the theme.
*
*/
?>

<div class="clear"></div>

<!-- END .container -->
</div>

<!-- BEGIN .footer -->
<div class="footer">

	<?php if ( is_active_sidebar('footer') ) { ?>

	<!-- BEGIN .row -->
	<div class="row">

		<!-- BEGIN .footer-widgets -->
		<div class="footer-widgets">

			<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer') ) : ?>
			<?php endif; ?>

		<!-- END .footer-widgets -->
		</div>

	<!-- END .row -->
	</div>

	<?php } ?>

	<!-- BEGIN .row -->
	<div class="row">

		<!-- BEGIN .footer-information -->
		<div class="footer-information">

			<!-- BEGIN .footer-content -->
			<div class="footer-content">

				<div class="align-left">
					<p><?php _e("Copyright", 'Dutch Bikes for Africa'); ?> ? <?php echo date(__("Y", 'organicthemes')); ?> · <?php _e("All Rights Reserved", 'Dutch Bikes for Africa'); ?> · <?php bloginfo('name'); ?></p>

				</div>

				<div class="align-right">
					<?php get_template_part( 'content/social' ); ?>
				</div>

			<!-- END .footer-content -->
			</div>

		<!-- END .footer-information -->
		</div>

	<!-- END .row -->
	</div>

<!-- END .footer -->
</div>

<!-- END #wrap -->
</div>

<?php wp_footer(); ?>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=246727095428680";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

</body>
</html>

I think i have to set the footer outside the wrapper?? But I don’t know how.