How do I center my footer?

how do i center this

        <footer>
           
            <!-- Footer toolbar -->
            <!-- +++++++++++++++++++++++++++++++++++++++ -->
            <section id="footer-tools" class="section">
               
                <ul class="clearfix">
                    <li id="attribution" class="module {% if settings.theme-style == 'minimalist' %}double-borders{% endif %}">
                            {% if settings.copyright-text.size > 0 %}
                              <h2 class="module-title accent-text">{{ settings.copyright-text }}</h2>
                            {% endif %}
                            <p {% if settings.copyright-text.size == 0 %}class="no-title"{% endif %}>{{ powered_by_link }}. {% if settings.enable-theme-branding %}Editions Theme by <a href="/">Pixel Union</a>.{% endif %}</p>
                    </li>
                   
                   
                    {% if settings.show-social-links %}
                    <li id="social-links" class="module {% if settings.theme-style == 'minimalist' %}double-borders{% endif %}">
                        <h2 class="module-title accent-text">{{ settings.social-links-title }}</h2>
                        <ul>
                            {% if settings.show-twitter-link.size > 0 %}
                            <li class="twitter"><a href="{{ settings.show-twitter-link }}">t</a></li>
                            {% endif %}
                            {% if settings.show-facebook-link.size > 0 %}
                            <li class="facebook"><a href="{{ settings.show-facebook-link }}">f</a></li>
                            {% endif %}
                            {% if settings.show-tumblr-link.size > 0 %}
                            <li class="tumblr"><a href="{{ settings.show-tumblr-link }}">T</a></li>
                            {% endif %}
                            {% if settings.show-pinterest-link.size > 0 %}
                            <li class="pinterest"><a href="{{ settings.show-pinterest-link }}">p</a></li>
                            {% endif %}
                            {% if settings.show-google-link.size > 0 %}
                            <li class="google"><a href="{{ settings.show-google-link }}">g</a></li>
                            {% endif %}
                            {% if settings.show-instagram-link.size > 0 %}
                            <li class="instagram"><a href="{{ settings.show-instagram-link }}">i</a></li>
                            {% endif %}
                            {% if settings.show-svpply-link.size > 0 %}
                            <li class="svpply"><a href="{{ settings.show-svpply-link }}">s</a></li>
                            {% endif %}
                            {% if settings.show-flickr-link.size > 0 %}
                            <li class="flickr"><a href="{{ settings.show-flickr-link }}">F</a></li>
                            {% endif %}
                            {% if settings.show-vimeo-link.size > 0 %}
                            <li class="vimeo"><a href="{{ settings.show-vimeo-link }}">v</a></li>
                            {% endif %}
                            {% if settings.show-youtube-link.size > 0 %}
                            <li class="youtube"><a href="{{ settings.show-youtube-link }}">y</a></li>
                            {% endif %}
                           
                        </ul>
                    </li>
                    {% endif %}
                   
                    {% if settings.show-mailing-list %}
                    <li id="mailing-list" class="module {% if settings.theme-style == 'minimalist' %}double-borders{% endif %}">
                        <h2 class="module-title accent-text">Join our mailing list</h2>
                       
                        {% if settings.mailing-list-type == 'mailchimp' %}
                            <form action="{{ settings.mailchimp-action-url }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
                  <input type="email" value="your@email.com" name="EMAIL" id="email-input" class="accent-text">
                  <input type="submit" class="accent-text small action-btn" value="Sign Up" name="subscribe" id="email-submit">
                </form>
                        {% endif %}
                       
                        {% if settings.mailing-list-type == 'shopify' %}
                            {% form 'customer' %}
                             
                              {% if form.posted_successfully? %}
                                <script type="text/javascript" charset="utf-8">
                                  window.location = '#mailing-list';
                                </script>
                                <p id="mailing-list-success">Thanks for signing up!</p>
                              {% else %}
                                <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
                                <input type="email" value="your@email.com" name="contact[email]" id="email-input" class="accent-text">
                                <input type="submit" class="accent-text small action-btn" value="Sign Up" name="subscribe" id="email-submit">
                              {% endif %}
                           
                            {% endform %}
                        {% endif %}
 
                    </li>
                    {% endif %}
                </ul>
               
            </section>
       
      {% unless settings.theme-style == 'bold' %}</footer>{% endunless %}
       
        {% if settings.show-payment-visa or settings.show-payment-amex or settings.show-payment-mastercard or settings.show-payment-cirrus or settings.show-payment-discover or settings.show-payment-paypal %}
        <div id="payment-options" {% if settings.payment-style == 'light' %}class="light"{% endif %}>
           
            <ul>
            {% if settings.show-payment-visa %} <li class="ir visa">visa</li>{% endif %}
            {% if settings.show-payment-amex %} <li class="ir amex">amex</li>{% endif %}
            {% if settings.show-payment-mastercard %} <li class="ir mastercard">mastercard</li>{% endif %}
            {% if settings.show-payment-cirrus %} <li class="ir cirrus">cirrus</li>{% endif %}
            {% if settings.show-payment-maestro %} <li class="ir maestro">maestro</li>{% endif %}
            {% if settings.show-payment-discover %} <li class="ir discover">discover</li>{% endif %}
            {% if settings.show-payment-paypal %} <li class="ir paypal">paypal</li>{% endif %}
            {% if settings.show-payment-interac %} <li class="ir interac">interac</li>{% endif %}
            {% if settings.show-payment-dankort %} <li class="ir dankort">dankort</li>{% endif %}
            {% if settings.show-payment-google %} <li class="ir google">google wallet</li>{% endif %}
            </ul>
           
        </div><!-- #payment-options -->
        {% endif %}
   
    {% if settings.theme-style == 'bold' %}</footer>{% endif %}
       
    {% if settings.theme-style == 'minimalist' %}</div><!-- #page-wrap -->{% endif %}

Code (markup):

 

You can use the tag <center> (people frown upon this tag but I like it):

Or, if you don't want to look like a weirdo, try using the following (where XY is the width of the footer):

 

Add the following in your stylesheet.

#footer {
width:980px;
margin:0px auto
}

 

If you footer is out side of your main div then add this code in your style sheet. It will be work .I also face this problem some month ago. When i use this code my problem solved.
#footer{ margin:0 auto; width:1024px;}