Bom dia! Estou tentando centralizar os elementos de uma lista que contem imagens dentro (uma lista de filmes), o que ocorre é que, se eu configuro um justify-content: flex start na ul, todo o bloco passa a não respeitar o justify content: center do pai. Minha intenção é que a a colecao fique alinhada ao centro ao mesmo tempo que o conteudo fique alinhado ao início. Alguem sabe me dizer onde está o erro?

HTML

 <div class="conteudo">
                <ul class="colecao">
                    <li><img src="./recursos_resiliaflix/1917_capa.jpg" alt="1947"></li>
                    <li><img src="./recursos_resiliaflix/a_origem.jpg" alt="A Origem"></li>
                    <li><img src="./recursos_resiliaflix/bad_boys_para_sempre.jpg" alt="Bad boys para sempre"></li>
                    <li><img src="./recursos_resiliaflix/batman_cavaleiro_das_trevas.jpg" alt="Batman cavaleiro das trevas"></li>
                    <li><img src="./recursos_resiliaflix/coringa.jpg" alt="Coringa"></li>
                    <li><img src="./recursos_resiliaflix/era_uma_vez_em_hollywood.jpg" alt="Era uma vez em hollywood"></li>
                    <li><img src="./recursos_resiliaflix/forrest_gump.jpg" alt="Forrest gump"></li>
                    <li><img src="./recursos_resiliaflix/jojo_rabit.jpg" alt="Jojo rabit"></li>
                    <li><img src="./recursos_resiliaflix/magnatas_do_crime_capa.jpg" alt="Magnatas do crime"></li>
                    <li><img src="./recursos_resiliaflix/o_homem_invisivel_capa.jpg" alt="O homem invisível"></li>
                    <li><img src="./recursos_resiliaflix/o_poco_capa.jpg" alt="o poço"></li>
                    <li><img src="./recursos_resiliaflix/parasita_capa.jpg" alt="Parasita"></li>
                    <li><img src="./recursos_resiliaflix/vingadores_ultimato.jpg" alt="Vingadores ultimato"></li>
                </ul>
            </div>

CSS

.conteudo {
    margin: 0 auto;
    border: 1px solid black;;
    display: flex;
   justify-content: center;


}

.colecao { 
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;    
    justify-content: flex-start;


.colecao li {
    margin: 0.5%;
    list-style: none;
    border: 1px solid blue;

}