title: Center and include links in list - css
body: <p>I'm about to change from using table to list but have some issues:</p>
  <p>I can't seem to get the list centered on the screen. What I'm looking for is for the list to not cover the whole screen horizontally. I also try to get the list and the text centered, and have the text link.</p>
  <p>So far so good. But how do I get not only the text in the list centered, but the list itself centered on the screen? I've tried a bunch of different ways, but haven't found anything that works.</p>
  <p><strong>What I have now is a table</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    }
    table {
      display: flex;
      flex-wrap: wrap;
      width: 50%;
      margin:0 auto;
    }
    p.padding {
    padding-left: 70%;
  }
  
  p.padding2 {
    padding-left: 30%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="w3-container w3-justify"&gt;
      &lt;table class="w3-table w3-striped w3-hoverable w3-black"&gt;
      &lt;thead&gt;
          &lt;tr class="w3-black"&gt;
          &lt;th style="align-text: center"&gt;
          &lt;th&gt;&lt;h2&gt;FIND MY ART&lt;/h2&gt;&lt;/th&gt;
  
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;
        &lt;td class="w3-black"&gt;&lt;h3&gt;&lt;p class="padding"&gt;&lt;a href="https://opensea.io/creepybits"&gt;OpenSea&lt;/h3&gt;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
        &lt;td class="w3-black"&gt;&lt;h3&gt;&lt;p class="padding2"&gt;&lt;a href="https://rarible.com/creepybits"&gt;Rarible&lt;/h3&gt;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="w3-black"&gt;&lt;h3&gt;&lt;p class="padding"&gt;&lt;a href="https://foundation.app/@creepybits"&gt;Foundation&lt;/h3&gt;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
        &lt;td class="w3-black"&gt;&lt;h3&gt;&lt;p class="padding2"&gt;&lt;a href="https://www.bakeryswap.org/#/usercenter/0x021E8A6bEC4300362165546f2F0F7E3baACf3aDe?artist=Creepybits"&gt;BakerySwap&lt;/h3&gt;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But it doesn't look good and gets all messed up at smaller screens. What I'm, looking for is something similar to this template I found. But I only want one of the lists, and for the list to be centered (without bullets or numbers).</p>
  <p>The template list looks like this
  <a href="https://i.stack.imgur.com/fvEV6.png" rel="nofollow noreferrer">Current template</a></p>
  <p>What I'm trying to do is this.
  <a href="https://i.stack.imgur.com/SCLfO.png" rel="nofollow noreferrer">What I want</a></p>