css3 – Centralizando uma lista com flutuadores

quando acho que estou pegando posicionamento me ocorre essas cascas de banana.
Quero centralizar essa lista .example em relação ao seu pai .quadro. A lista se trata de uma ul com float:left.

Por que não consigo centralizar esta lista .example em relação ao seu pai .quadro aplicando propriedades de margin? Aparentemente não consigo limpar flutuadores usando clearfix na própria lista, por isso crie a div .test e nela apliquei a técnica. O que estou fazendo de errado?

Aqui está o HTML

<body>
    <div class="quadro">
        <div class="test">
            <ul class="example">
                <li>Primeiro</li>
                <li>Segundo</li>
                <li>Terceiro</li>
                <li>Quarto</li>
            </ul>
        </div>
   </div>
</body>

E aqui está o Css

    margin: 60px auto;
    width: 800px;
    height: 300px;
    background: #FFBE4A;
    border-radius: 15px;
    box-shadow: 2px 2px 2px grey;
    box-sizing: border-box;
    overflow: hidden;
}

.test:before,
.test:after {
  content: "";
  display: table;
}

.test:after {
  clear: both;
}

.test{
  clear: both;
  *zoom: 1;
}

.test{
    margin: 0 auto;
}

.example li{
    list-style: none;
    float: left;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 6%, rgba(0,212,255,1) 100%);
    padding: 12px 20px; 
    border: 1px solid black;
    color: #fff;
}


.example li:first-child {
  border-radius: 4px 0 0 4px;
}

.example li:last-child {
  border-radius: 0 4px 4px 0;
}

.example li:hover{
    background: purple;
}