LenkaPage.com on "Twenty twelve - changing background colour of footer to include widgets"

Hi,

I have added three widgets into my footer area as per this tutorial, which will give you the relevant css code for the footer area.

Additional code used:

#colophon {
	background: url(http://lenkapage.com/daylight/wp-content/uploads/2014/04/footer-logo.png) no-repeat scroll 20px 20px transparent;
	background-color: #00A0E1;
	color: white;
	padding: 115px 0 0 100px;
	margin-bottom:20px;

}

Link to test site: http://lenkapage.com/daylight/

My question: I would like the widgets to sit within the blue area. Can anyone please advise the best way to achieve this?

Additional information:
Twenty twelve theme with child theme installed. Style.css, footer.php and functions.php created. Functions.php includes only code from tutorial.

I amended the code within the footer tags (as per above mentioned tutorial to this:

<footer id="colophon" role="contentinfo">
		<?php
		/* footer sidebar */
		if ( ! is_404() ) : ?>
			<div id="footer-widgets" class="widget-area three"> 

				<div class="widget-left">
					<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
							<?php dynamic_sidebar( 'sidebar-4' ); ?>
					<?php endif; ?>
				</div> 

				<div class="widget-center">
					<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
					<?php dynamic_sidebar( 'sidebar-5' ); ?>
					<?php endif; ?>
				</div> 

				<div class="widget-right">
					<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
							<?php dynamic_sidebar( 'sidebar-6' ); ?>
					<?php endif; ?>
				</div> 

			</div><!-- #footer-widgets -->
		<?php endif; ?>

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

Thanks in advance!