a tarefa aparece fora do campo

baixei o arquivo inicial da aula e estou trabalhando junto com o professor no decorrer dos vídeos, mas minha tarefa não aparece dentro do campo esbranquiçado, ela aparece fora, no fundo azul escuro, e em fonte preta:

o HTML está assim:

<ul class="list">
        <li class="task" data-task></li>
          <p class="content">Algo não está certo</p>
        </ul>

se eu colocar o conteúdo dentro das tags li, funciona:

<ul class="list">
        <li class="task" data-task>Mas ainda assim não está certo, certo?</li>
          <p class="content">Algo não está certo</p>
        </ul>

com o conteúdo entre as tags li tudo funciona conforme o vídeo da aula, mas o professor colocou no dele entre as tags p. não consegui diagnosticar o erro, as classes estão idênticas ao código dele e meu código js também