title: CSS: can't center a UL
body: <p>On <a href="http://secretcitywalks.co/wp/" rel="nofollow">this page</a>, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress.</p>
  
  <pre><code>&lt;div class="menu-footer-menu-container"&gt;
    &lt;ul id="menu-footer-menu" class="menu"&gt;
      &lt;li id="menu-item-143"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-151"&gt;&lt;a href="#"&gt;Select Your City&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-162"&gt;&lt;a href="#"&gt;How Walks Work&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-160"&gt;&lt;a href="#"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-166"&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-153"&gt;&lt;a href="#"&gt;Partners&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-154"&gt;&lt;a href="#"&gt;Press&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-144"&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-145"&gt;&lt;a href="#"&gt;Site Map&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-146"&gt;&lt;a href="#"&gt;Terms &amp;#038; Conditions&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to center this menu.</p>
  
  <p>I tried the following CSS but it didn't work:</p>
  
  <pre><code>div.menu-footer-menu-container {text-align:center;}
  ul#menu-footer-menu.menu {
    list-style-type: none;
    width: 760px !important;
    margin: 0 auto !important;
    display: inline-block !important;
  }
  ul#menu-footer-menu li {
    display: inline-block !important;
    margin-right: 14px;
    margin-right: 1rem;
  }
  </code></pre>