class não reconhecida no html

Bom dia. A parte de beneficios da minha pagina "perdeu" o alinhamento por algum motivo que não estou conseguindo encontrar o motivo para tal alteração. Algém pode me ajudar?

html

Benefícios

            <div class="beneficiosconteudo">
                <ul class="lista-beneficios">
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço Diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                    <li class="itens">Pontualidade</li>
                    <li class="itens">Limpeza</li>
                </ul><img src="beneficios.jpg" class="imagembeneficios">
            </div>

            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>

        </section>

CSS

.beneficios { padding: 3em 0; background: #888888; }

.beneficiosconteudo {. /* esse parametro não está sendo reconhecido por nenhum navegador */ width: 640xp; margin: 0 auto; }

.lista-beneficios { width: 50%; display: inline-block; vertical-align: top; }

.itens { line-height: 1.5; }

.itens:first-child { font-weight: bold; }

.itens:before { content: "⭑"; }

.imagembeneficios { width: 50%; opacity: 0.7; transition: 400ms; }

.imagembeneficios:hover { opacity: 1; }