How to align a list center with html & css? - html

Question

I'm having issues trying to align my list to the center of my page so that it'll match with the rest of my content. I've tried other ways but it either doesn't work or aligns to far to the right.
HTML:
<p>Digital Media:</p>
<div id="list">
<ul>
<li>Tablet</li>
<li>Tablet Pen</li>
<li>Phone + my finger</li>
</ul>
</div>
<p>Tradtional Media:</p>
<div id="list">
<ul>
<li>Notebook</li>
<li>Pens</li>
<li>Pencils</li>
<li>Colored Pencils</li>
<li>Fine-Tip Markers</li>
<li>Canvas</li>
<li>Watercolor Paint</li>
<li>Acrylic Paint</li>
<li>Various-Sized Paintbrushes</li>
</ul>
</div>
CSS:
ul {
margin: 0 auto;
width: 1200px;
padding-left: 0;
font-size: 0;
justify-content: center;
}
li {
font-size: 18px;
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
margin: 15px 25px;
box-sizing: border-box;
text-align: center;
}

Answer 1

You can change code:
li {
...
margin: 15px auto;
...
}
And in a page, don't should multi element with same ID
<div id="list"> => <div class="list">

Answer 2

You can try wrapping the lists in a div element and centering that. See w3schools’s article on css margins.
<style>
.center {
margin: 30px auto;
}
p {
text-align: center;
}
ul {
margin: 0 auto;
width: 150px;
padding-left: 0;
font-size: 0;
justify-content: center;
}
li {
font-size: 18px;
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
margin: 15px 25px;
box-sizing: border-box;
text-align: center;
}
</style>
<div class="center">
<p>Digital Media:</p>
<ul>
<li>Tablet</li>
<li>Tablet Pen</li>
<li>Phone + my finger</li>
</ul>
<p>Tradtional Media:</p>
<ul>
<li>Notebook</li>
<li>Pens</li>
<li>Pencils</li>
<li>Colored Pencils</li>
<li>Fine-Tip Markers</li>
<li>Canvas</li>
<li>Watercolor Paint</li>
<li>Acrylic Paint</li>
<li>Various-Sized Paintbrushes</li>
</ul>
</div>