Como eliminar espacio de la izquieda de un <li>?

[mpozo]

Pensé que la galería era horizontal. Prueba con este otro

Código CSS:

div ul {
    list-style: none;
    padding: 0;
    border: 1px solid rgb(138, 129, 129);
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
 
div ul li {
    text-align: center;
    position: relative;
    width: 25%;
    padding: 1rem .6rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
div ul li div {
    height: 3rem;
    line-height: 3rem;
    margin: 0 1rem;
    background: rgb(255, 0, 0);
}
 

Código HTML:

<div>
    <ul>
        <li><div>Opción 1</li>
        <li><div>Opción 2</li>
        <li><div>Opción 3</li>
        <li><div>Opción 4</li>
        <li><div>Opción 5</li>
        <li><div>Opción 6</li>
        <li><div>Opción 7</li>
        <li><div>Opción 8</li>
        <li><div>Opción 9</li>
        <li><div>Opción 10</li>
    </ul>
</div>