Center Footer Widget on Responsive Layout

Question

I have a wordpress 3.9.2 site here: http://innerwestadv.com/dev/. I would like to make it so the footer widgets center when the screen gets smaller.

HTML:

<div id="text-2" class="col-sm-4 widget widget_text">           <div class="textwidget"><a href="http://www.iwstrategies.biz/" title="IW Strategies" target="_blank"><img src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/IW_strategies_logo.png" alt="IW Strategies" class="alignleft size-full wp-image-137" height="90" width="360"></a>
<div style="margin-left:23px;">
IW Strategies provides the strategies necessary to achieve your goals. Whether it’s a successful result before a local government board or delivering your message in the court of public opinion, the methods of IW Strategies are tried and tested. Our results are tangible. Starting with a clearly identified goal, IW Strategies provides the roadmap to success and the tools required to get there smoothly.
</div></div>
        </div><div id="text-3" class="col-sm-4 widget widget_text">         <div class="textwidget"><a href="http://innerwestadv.com/dev/?page_id=12" title="Innerwest Advertising &amp; Public Relations"><img src="http://innerwestadv.com/dev/wp-content/uploads/2014/08/IW_logo-ftr.png" alt="Innerwest Advertising &amp; Public Relations" class="alignleft size-full wp-image-136" height="160" width="360"></a><br>
<div style="margin-left:23px;">
170 S. Virginia Street, Suite 202<br>
Reno, Nevada 89501<br>
Fax: (775) 323-5572
</div></div>
        </div>      
<div id="recent-posts-2" class="col-sm-4 widget widget_recent_entries">     <h5>INNERTHOUGHTS RECENT POSTS</h5>     <ul>
                    <li>
                <a href="http://innerwestadv.com/dev/?p=425">5 Reasons Why Neglecting Your Website is Destroying Your Brand</a>
                            <span class="post-date">August 27, 2014</span>
                        </li>
                </ul>
        </div>

CSS:

.footer .widget {
    float: none;
    margin: 0 auto;
    max-width: 360px;
}

I have tried setting the position to relative but I think something else is getting in the way. Any help would be appreciated.

Answer 1

If I am not wrong the problem seems that when the window resizes the footer widgets begin aligning to the left edge of the page. Editing CSS via Inspector I was able to solve the problem adding text-align:center; to the footer row:

.footer-sidebar{
  text-align:center;
}

You can restore the proper text alignment with

.footer .widget{
  text-align: left;
}