Center and include links in list - css - html

Question

I'm about to change from using table to list but have some issues:
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.
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.
What I have now is a table
table {
}
table {
display: flex;
flex-wrap: wrap;
width: 50%;
margin:0 auto;
}
p.padding {
padding-left: 70%;
}
p.padding2 {
padding-left: 30%;
}
<div class="w3-container w3-justify">
<table class="w3-table w3-striped w3-hoverable w3-black">
<thead>
<tr class="w3-black">
<th style="align-text: center">
<th><h2>FIND MY ART</h2></th>
</tr>
</thead>
<tr>
<td class="w3-black"><h3><p class="padding">OpenSea</h3></p></td>
<td class="w3-black"><h3><p class="padding2">Rarible</h3></p></td>
</tr>
<tr>
<td class="w3-black"><h3><p class="padding">Foundation</h3></p></td>
<td class="w3-black"><h3><p class="padding2">BakerySwap</h3></p></td>
</tr>
</table>
</div>
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).
The template list looks like this
Current template
What I'm trying to do is this.
What I want

Answer 1

Is better to use grid in this case, you can find more info here
html{background-color:black}
.wrapper{
margin:0 auto;
margin-top:50px;
width:300px;
text-align:center;
}
.header{
padding: 15px;
color:white;
font-size:23px;
background-color:grey;
}
.grid-container{
grid-template-colums:auto;
}
.grid-item {
border-bottom: 1px solid grey;
padding: 7px;
font-size: 20px;
background-color:#CDCDCD;
}
<div class="wrapper">
<div class="header">List</div>
<div class="grid-container">
<div class="grid-item">item one</div>
<div class="grid-item">item two</div>
<div class="grid-item">item three</div>
<div class="grid-item">item four</div>
<div class="grid-item" style="padding:20px!important">$54</div>
<div class="grid-item" style="padding:20px!important;background-color:#c0c0c0"><button style="cursor:pointer">sign up</button></div>
</div>
</div>