Three widgets in footer won't align to center for me..

Howdy…I’ve three widgets which won’t align in the centre. If I didn’t want a 100% wide footer it would work by setting to a specific size but with the width at 100% it just sits out on the left. Can anybody help me… I can fumble my way around css but I’m stumped on this.. I’m sure it’s just something simple…

demo site can be seen here https://mtbireland.com/hkr

footer.php

</div>
</div>
</div>
<div id="footer">
<div id="footer-left">
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 1') ) : ?> <li>
      <?php endif; ?>
  </div>
  <div id="footer-middle">
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 2') ) : ?> <li>
      <?php endif; ?>
  </div>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 3') ) : ?> <li>
      <?php endif; ?>
  </div>
 </div>

extract from stylesheet

/* The Footer */

#footer {
	height:200px;
	padding:20px 0 0 0;
	color:#FFFFFF;
	font-size:12px;
	font-weight:normal;
	text-align:left;
	line-height:20px;
	font-family: Tahoma,georgia,Century gothic,  Arial, sans-serif;
	width:100%;
	float:left;
	background:#392E2C;
	}

/* Footer Widgets */

#footer-left {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 30px;
	padding: 10px;
	text-align:left;
}
#footer-middle {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}
#footer-right {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}