How to center a ul with li inside while keeping my formatting

Question

So I'm using this CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1f1f2d;
}

li {
    float: left;
}

li a {
    font-family: "Copperplate Gothic Bold", Brown, Campton, Arial, Helvetica, Sans-serif;
    font-size: 1.2em;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 145px;
    text-decoration: none;
}

li a:hover {
    background-color: #f2f2f2;
    color: #1f1f2d;
}

to make these buttons in the HTML

<ul>
        <li><a href="">Home</a></li>
        <li><a href="">page 1</a></li>
        <li><a href="">page 2</a></li>
        <li><a href="">page 3</a></li>
</ul>

https://jsfiddle.net/j5utbcqn/

How do keep the different colored background and hover color difference while making the toolbar fit the horizontal and only taking up a bit of the vertical space on the page? I want to make sure the elements stay in a horizontal line while also filling the entire page on different resolution settings.

Answer 1

    <nav>
<ul>
        <li><a href="">Home</a></li>
        <li><a href="">page 1</a></li>
        <li><a href="">page 2</a></li>
        <li><a href="">page 3</a></li>
</ul>
</nav>

CSS:

nav {width: 100%;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1f1f2d;

}

li {
    float: left;
    width: 25%;
}

li a {
    font-family: "Copperplate Gothic Bold", Brown, Campton, Arial, Helvetica, Sans-serif;
    font-size: 1.2em;
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

li a:hover {
    background-color: #f2f2f2;
  color: #1f1f2d;}

Answer 2

div {
    text-align: center;
}

ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1f1f2d;
}

li {
    display: inline-block;
}

li a {
    font-family: "Copperplate Gothic Bold", Brown, Campton, Arial, Helvetica, Sans-serif;
    font-size: 1.2em;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 15px 14px 15px;
    text-decoration: none;
}

li a:hover {
    background-color: #f2f2f2;
    color: #1f1f2d;
}

<div>
<ul>
        <li><a href="">Home</a></li>
        <li><a href="">page 1</a></li>
        <li><a href="">page 2</a></li>
        <li><a href="">page 3</a></li>
</ul>
</div>