Style CSS não aplica

Olá!

Estou na aula 4 do curso HTML e CSS parte2.

Onde apliquei o que o professor falou adicionando as listas complexas. Porém neste caso meus textos ficaram sublinhados.

Tentei aplicar o "text-decoration: none" diretamente na tag "li" dentro da "main" no CSS

main li {
    text-decoration: none;
}

Entretanto não surtiu efeito. Quando apliquei na tag "u" dentro da "main" funcionou perfeitamente.

main u {
    text-decoration: none;
}

Meu HTML está assim:

<main>
            <u>
            <li>
                <h2>Cabelo</h2>
                <img src="cabelo.jpg">
                <p>Na tesoura ou máquina, como o cliente preferir</p>
                <p>R$ 25,00</p>
            </li>

            <li>
                <h2>Barba</h2>
                <img src="barba.jpg"> 
                <p>Corte e desenho profissional de barba</p>
                <p>R$ 18,00</p>
                </li>

            <li>
                <h2>Cabelo+Barba</h2>
                <img src="barba+cabelo.jpg">
                <p>Pacote completo de cabelo e barba</p>
                <p>R$ 35,00</p>                
            </li>
            </u>
        </main>

Por que isso ocorre?