Modal bugado após colocar o html semântico

Olá, olhei, olhei e não identifiquei o erro que deixou o modal todo bagunçado.

O que eu fiz de errado?

Obrigado.

<!-- Modal -->
<div class="modal fade" id="modal-contato" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <dialog class="modal-content">
      <header class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Entre em contato</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </heder>
      <main class="modal-body">
        <form>
          <div class="form-group">
            <label for="formGroupExampleInput">Nome completo</label>
            <input type="text" class="form-control" id="formGroupExampleInput" 
              placeholder="Insira seu nome completo">
          </div>

          <div class="form-group">
            <label for="exampleFormControlInput1">Endereço de e-mail</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" 
              placeholder="nome@exemplo.com">
          </div>

          <div class="form-group">
            <label for="exampleFormControlTextarea1">Deixe seu cometário</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" 
              placeholder="Insira aqui seu comentário"></textarea>
          </div>
        </form>
      </main>
      <footer class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn botao-cor-especial">Enviar</button>
      </footer>
    </dialog>
  </div>
</div>