title: how to center align list items inside the div?
body: <p>I have page links in my footer which are left aligned in large screens. I want to center align them in extra small screen. The left align looks messy in extra small screen. I want to center align them like in the picture i have included. Here is my <a href="https://jsfiddle.net/rp0j1m0r/" rel="nofollow noreferrer">jsfiddle</a> </p>
  
  <p><a href="https://jsfiddle.net/rp0j1m0r/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vI4sr.png" alt="enter image description here"></a></p>
  
  <p>Here is what i have tried </p>
  
  <pre><code>.footer-link{
  margin: 20px 0;
  margin-left: 15px;
  }
  
  .footer-link&gt;ul&gt;li{
  margin: 10px 4.2% 10px 0%;
  font-family: gotham_book;
  font-weight: bold;
  color: #424242;
  font-size: 14px;
  text-decoration: none;
  text-align: left;
  }
  </code></pre>
  
  <p>I tried to align it center. But it doesn't work. How do i center them like i showed in the picture. </p>
  
  <pre><code>&lt;div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero"&gt;
  
       &lt;ul class="footer-links list-inline"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Disclosures&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
  </code></pre>