center unordered lists without container - html

Question

I am trying to create a footer with unordered list elements. Below these lists I want to have a second div container with the copyright in it.
This is what I want to achieve
And this is my code so far
.list {
list-style: none;
display: inline-block;
}
#imprintContent {
border-bottom: 1px solid #656a70;
}
<div id="imprint">
<div id="imprintContent">
<ul class="list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul class="list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<div id="copyright">
© Copyright
</div>
</div>
How can I center these lists, place a small line below them (maybe a bottom border) and place the copyright below this border?
A free space should remain on the left and right. You can see a working example footer here
https://www.hashicorp.com/contact

Answer 1

if your issee is making footer center, just use text-align to center
.list {
list-style: none;
display: inline-block;
}
#imprintContent {
border-bottom: 1px solid #656a70;
}
#imprint {
text-align:center
}
<div id="imprint">
<div id="imprintContent">
<ul class="list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul class="list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<div id="copyright">
© Copyright
</div>
</div>

Answer 2

Hi
This problem can be easily solved with flexbox.
#imprint{
margin: 0% 20%; /*this make the free space to the sides, adjust the 20% to the desired number*/
}
#imprintContent{
display: flex;
justify-content: center;
align-items: center;
}
#green{
background: green;
}
#red{
background: red;
}
#copyright{
text-align: center;
}
.list{
padding: 10%;
margin: 10%;
}
.list > li{
margin-top: 4%;
margin-bottom: 4%;
}
<div id="imprint">
<div id="imprintContent">
<ul id="green" class="list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul id="red" class="list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<hr>
<div id="copyright">
© Copyright
</div>
</div>

Answer 3

You can do this
#imprint { display:table; margin:0 auto; }

Answer 4

This is a start. . .
body * {...} is just a reset.
body * {
margin: 0;
padding: 0;
}
footer {
max-width: 60%;
margin: 0 auto;
}
li {
list-style-type: none;
}
.lists {
display: flex;
margin-bottom: 2rem;
}
.lists__list {
flex: 1 auto;
}
.footer__copyright {
border-top: 1px solid black;
padding-top: 2rem;
text-align: center;
}
<footer>
<div class="lists">
<ul class="lists__list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul class="lists__list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<div class="footer__copyright">
© Copyright
</div>
</footer>