title: Unordered list margin doesn't work inside my footer
body: <p>I want the unordered list to be centered in relation to the footer div, but I can't get this to work for some reason. My concern is that my stickyfooter might have anything to do with it, but I really don't know. Help appreciated.</p>
  
  <p><strong>EDIT:</strong> It would also appear that I cannot <code>margin-top</code> any element inside <code>#footer</code>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="footer"&gt;
  &lt;ul&gt;
      &lt;li&gt;Item1&lt;/li&gt;
      &lt;li&gt;Item2&lt;/li&gt;
      &lt;li&gt;Item3&lt;/li&gt;
      &lt;li&gt;Item4&lt;/li&gt;
          &lt;li&gt;Item5&lt;/li&gt;
          &lt;li&gt;Item6&lt;/li&gt;
          &lt;li&gt;Item7&lt;/li&gt;
          &lt;li&gt;Item8&lt;/li&gt;
              &lt;li&gt;Item9&lt;/li&gt;
              &lt;li&gt;Item10&lt;/li&gt;
              &lt;li&gt;Item11&lt;/li&gt;
              &lt;li&gt;Item12&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#footer {
      height: 200px;
      background: linear-gradient(#545454, #3B3B3B); /* IE9- needs fix */ 
      position: relative;
      margin-top: -200px;
      clear: both;
      bottom: 0;
  }
  
      #footer ul {
          width: 450px;
          margin: 50px auto; /* This is the part that doesn't work.. */
          font-size: 13px;
          color: white;
          -webkit-column-count: 3; /* Chrome, Safari, Opera */
          -moz-column-count: 3; /* Firefox */
          column-count: 3; /* Standard */
          -webkit-column-gap: 0; /* Chrome, Safari, Opera */
          -moz-column-gap: 0; /* Firefox */
          column-gap: 0; /* Standard */
      }
  
          #footer li {
              width: 150px;
              display: inline-block;
              margin: 5px;
          }
  </code></pre>