Como deixar o botão alinhado a direita em cima da tabela?

Bom, eu estou criando um sistema de cadastro de pessoas usando HTML, CSS, JAVASCRIPT a minha aplicação está funcionando normalmente, a aplicação é bem complexa e é bastante código recomendo a vocês a executar o código logo abaixo, abrindo na página toda, pois ainda não redimensionei a aplicação, mas o problema é bem simples é só posicionar o botão remover com id="remover" na direita em cima das tabela com a class="tabela", porém não está dando certo. Vejam, que o botão remover está posicionado na direita em cima das tabela quando a página é carregada, funcionando normalmente, você realiza o cadastro das pessoas e vai cadastrando normalmente sem problema algum, porém quando você vai cadastrando as pessoas, começa a emcher de tabela na tela com as informações do usuário e com forme vai tendo muita tabela na tela ele vai sair para fora do container que é a div com id="container-de-dados", mas para isso não acontecer coloquei overflow: auto para criar um scroll, mas ao longo que você cadastra mais o menos 4 pessoas, ae que está o problema o botão remover permanece uns 20px a mais na direita da aonde ele estava fazendo o botão ir mais a direita e a tabela mais a esquerda e causando um scroll horizontal e acaba estragando o layout da aplicação. Quem poder ajudar agradeço.

// Função cadastroDePessoas(). function cadastroDePessoas() {     // Variáveis com valores fazendo referência aos id no documento html.     var body = window.document.body;     var nome = window.document.querySelector("#nome");     var cpf = window.document.querySelector("#cpf");     var nomeCorreto = window.document.querySelector("#nome-correto");     var cpfCorreto = window.document.querySelector("#cpf-correto");     var botaoCadastrar = window.document.querySelector("#botao");     var containerDeDados = window.document.querySelector("#container-de-dados");     var vazioOunao = window.document.querySelector("#titulo3");     var vermelhoEazul = window.document.querySelector("#vermelho-e-azul");     var contagemDeCadastro = 0;      // Variáveis com valores da data do sistema operacional.     var dataDoSistemaOperacional = new Date();     var hora = dataDoSistemaOperacional.getHours();     var minuto = dataDoSistemaOperacional.getMinutes();     var segundo = dataDoSistemaOperacional.getSeconds();     var ano = dataDoSistemaOperacional.getFullYear();     var mes = dataDoSistemaOperacional.getMonth();     var dia = dataDoSistemaOperacional.getDay();      // Variável com valor de objeto e contém valores de propriedades que são string.     const insercoes =     {         3 : ".",         7 : ".",         11 : "-"     };      if (hora < 10)     {         hora = "0" + hora;     }      if (minuto < 10)     {         minuto = "0" + minuto;     }      if (segundo < 10)     {         segundo = "0" + segundo;     }      if (mes < 10)     {         mes = "0" + mes;     }      if (dia < 10)     {         dia = "0" + dia;     }          // Variável nome contem o evento de input e chamara a função anônima function(){}.     nome.addEventListener("input", function()     {         // Valor de nome recebe o valor de nome convertido para maiúscula.         nome.value = nome.value.toUpperCase();          // Se o comprimento do valor de nome for igual a 50 execute este bloco se não passe para o outro.         if (nome.value.length == 50)         {             nomeCorreto.textContent = "Número máximo de caracteres atingido";             nomeCorreto.style.color = "rgb(255, 0, 0)";         }          else if (nome.value.length >= 21)         {             nomeCorreto.textContent = "Ótimo Nome"             nomeCorreto.style.color = "rgb(64, 221, 49)";         }          else if (nome.value.length > 10)         {             nomeCorreto.textContent = "Nome razoável";             nomeCorreto.style.color = "rgb(238, 170, 68)";         }          else if (nome.value.length > 0)         {             nomeCorreto.textContent = "Nome muito pequeno";             nomeCorreto.style.color = "rgb(255, 0, 0)";         }                  else         {             nomeCorreto.textContent = "";         }     });      cpf.addEventListener("input", function(e)     {         let nums = cpf.value.match(/\d/g) || [];                   for (let posicaoInserir of Object.keys(insercoes))         {           if (nums.length > parseInt(posicaoInserir))           {             nums.splice(parseInt(posicaoInserir), 0, insercoes[posicaoInserir]);           }         }                  cpf.value = nums.join("");          if (cpf.value.length === 14)         {             cpfCorreto.textContent = "CPF no formato correto";             cpfCorreto.style.color = "rgb(64, 221, 49)";         }          else         {             cpfCorreto.textContent = "";         }     });      botaoCadastrar.addEventListener("click", function()     {         if (nome.value == "")         {             nome.style.animation = "animacaoNomeEcpf 0.3s linear";             nomeCorreto.textContent = "Nome Vazio";             nomeCorreto.style.color = "rgb(255, 0, 0)";         }          if (cpf.value == "")         {             cpf.style.animation = "animacaoNomeEcpf 0.3s linear";             cpfCorreto.textContent = "CPF Vazio";             cpfCorreto.style.color = "rgb(255, 0, 0)";         }          if (nome.value != "" && cpf.value != "")         {             criarTabelaDeDados();             function criarTabelaDeDados()             {                 ++ contagemDeCadastro;                 vazioOunao.textContent = "";                  var criarConfirmarEnegar, criarBotaoConfirmar, criarBotaoNegar,                 criarBotaoRemover,                 criarTable1,                 criarTr1, criarTr2,                 criarTh1, criarTh2, criarTh3, criarTh4, criarTh5,                 criarTd1, criarTd2, criarTd3, criarTd4, criarTd5;                  const simboloCorreto = String.fromCodePoint(0x02714);                 const simboloChis = String.fromCodePoint(0x000D7);                  criarBotaoRemover = window.document.createElement("button");                  criarConfirmarEnegar = window.document.createElement("div");                  criarBotaoConfirmar = window.document.createElement("div");                 criarBotaoNegar = window.document.createElement("div");                  criarTable1 = window.document.createElement("table");                                  criarTr1 = window.document.createElement("tr");                                  criarTr2 = window.document.createElement("tr");                                  criarTh1 = window.document.createElement("th");                 criarTh2 = window.document.createElement("th");                 criarTh3 = window.document.createElement("th");                 criarTh4 = window.document.createElement("th");                 criarTh5 = window.document.createElement("th");                                  criarTd1 = window.document.createElement("td");                 criarTd2 = window.document.createElement("td");                 criarTd3 = window.document.createElement("td");                 criarTd4 = window.document.createElement("td");                 criarTd5 = window.document.createElement("td");                  criarConfirmarEnegar.setAttribute("id", "confirmarEnegar");                 criarBotaoConfirmar.setAttribute("id", "confirmar");                 criarBotaoNegar.setAttribute("id", "negar");                  criarBotaoRemover.setAttribute("id", "remover");                 criarBotaoRemover.setAttribute("type", "button");                 criarBotaoRemover.textContent = "remover";                  criarBotaoConfirmar.textContent = simboloCorreto;                 criarBotaoNegar.textContent = simboloChis;                  criarTable1.setAttribute("class", "tabela");                                  criarTh1.textContent = "Nº";                 criarTh2.textContent = "Nome";                 criarTh3.textContent = "CPF";                 criarTh4.textContent = "Hora do Cadastro";                 criarTh5.textContent = "Data do Cadastro";                  criarTd2.textContent = nome.value;                 criarTd3.textContent = cpf.value;                 criarTd4.textContent = `$  {hora}:$  {minuto}:$  {segundo}`;                 criarTd5.textContent = `$  {dia}/$  {mes}/$  {ano}`;                  criarTable1.appendChild(criarTr1);                 criarTable1.appendChild(criarTr2);                  criarTr1.appendChild(criarTh1);                 criarTr1.appendChild(criarTh2);                 criarTr1.appendChild(criarTh3);                 criarTr1.appendChild(criarTh4);                 criarTr1.appendChild(criarTh5);                  criarTr2.appendChild(criarTd1);                 criarTr2.appendChild(criarTd2);                 criarTr2.appendChild(criarTd3);                 criarTr2.appendChild(criarTd4);                 criarTr2.appendChild(criarTd5);                  criarConfirmarEnegar.appendChild(criarBotaoConfirmar);                 criarConfirmarEnegar.appendChild(criarBotaoNegar);                  containerDeDados.appendChild(criarBotaoRemover);                 containerDeDados.appendChild(criarConfirmarEnegar);                 containerDeDados.appendChild(criarTable1);                  nome.value = "";                 cpf.value = "";                 nomeCorreto.textContent = "";                 cpfCorreto.textContent = "";                  vermelhoEazul.textContent = contagemDeCadastro;                 vermelhoEazul.style.backgroundColor = "rgb(0, 255, 0)";                              criarBotaoRemover.addEventListener("click", function()                 {                     this.style.display = "none";                     criarConfirmarEnegar.style.display = "block";                 });                  criarBotaoNegar.addEventListener("click", function()                 {                     criarConfirmarEnegar.style.display = "none";                     criarBotaoRemover.style.display = "block";                     criarBotaoRemover.style.left = "570px";                 });                  criarBotaoConfirmar.addEventListener("click", function()                 {                     criarConfirmarEnegar.style.display = "none";                     containerDeDados.removeChild(criarTable1);                     -- contagemDeCadastro;                     vermelhoEazul.textContent = contagemDeCadastro;                                          if (contagemDeCadastro == 0)                     {                         vazioOunao.textContent = "Vazio";                         vermelhoEazul.style.backgroundColor = "rgb(255, 0, 0)";                     }                 });             }         }     });      botaoCadastrar.addEventListener("mousedown", function()     {         nome.style.animation = "none";         cpf.style.animation = "none";     }); }  // Adicionar evento de load no window e chamar a função cadastroDePessoas(). window.addEventListener("load", cadastroDePessoas);
@charset "utf-8";  html {     background-color: rgb(88, 88, 88); }  body {     width: auto;     height: 703px;     margin: 30px;     background-color: rgb(255, 255, 255);     border-radius: 10px;     counter-reset: contador-de-numero; }  * {     box-sizing: border-box; }  ::selection {     background-color: rgb(209, 207, 207); }  /* --------------------------------------------- Cadastro de pessoas --------------------------------------------- */  #cadastro-de-pessoas {     width: 50%;     height: 100%;     /* border: 1px solid black; */     border-radius: 10px 0 0 10px;     border-right: 1px solid rgb(175, 175, 175);     font-family: Arial, Helvetica, sans-serif;     text-align: center;     padding: 50px;     color: rgb(100, 100, 100);     float: left; }  #nome, #cpf {     width: 100%;     font-size: 20px;     border: 2px solid rgb(77, 74, 74);     border-radius: 20px;     outline: none;     padding: 10px 10px 10px 20px;     margin-bottom: 15px;     /* background-image: url("../imagem/correto.png"); */     background-repeat: no-repeat;     background-size: 50px 40px;     background-position: 99% 0;     position: relative; }  #nome:hover, #cpf:hover {     background-color: rgb(245, 241, 241); }  #nome:focus, #cpf:focus {     background-color: rgb(245, 241, 241); }  #nome-correto, #cpf-correto, #nota3 {     text-align: left;     margin: 0;     margin-bottom: 15px; }  @keyframes animacaoNomeEcpf {     0%     {         left: 0;     }      50%     {         left: -10px;     }      100%     {         left: 10px;         background-color: rgb(245, 215, 215);         border: 2px solid rgb(255, 0, 0);     } }  #botao {     width: 100%;     height: 50px;     border: none;     border-radius: 20px;     outline: none;     cursor: pointer;     font-size: 20px;     background-color: rgb(51, 51, 224);     color: rgb(255, 255, 255); }  #botao:hover {     background-color: rgb(73, 73, 221); }  #vermelho-e-azul {     background-color: rgb(255, 0, 0);     color: rgb(255, 255, 255);     padding: 5px 10px;     border-radius: 10px; }  /* --------------------------------------------- Pessoas de Cadastradas --------------------------------------------- */  #pessoas-cadastradas {     width: 50%;     height: 100%;     /* border: 1px solid black; */     border-radius: 0 10px 10px 0;     border-left: 1px solid rgb(175, 175, 175);     font-family: Arial, Helvetica, sans-serif;     text-align: center;     padding: 50px;     color: rgb(100, 100, 100);     float: left; }  #container-de-dados {     width: auto;     height: 90%;     border: 1px dashed rgb(175, 175, 175);     overflow: auto;     position: relative;     box-sizing: border-box; }  #titulo3 {     position: absolute;     left: 50%;     top: 50%;     transform: translateX(-50%) translateY(-50%);     margin: 0; }  .tabela {     width: 100%;     height: 100px;     border: 1px solid black;     border-collapse: collapse;     font-size: 14px;     cursor: pointer;     white-space: nowrap;     margin-bottom: 30px; }  #remover {     position: relative;     height: 23px;     /* left: 286px; */     left: 284px;     cursor: pointer;     background-color: rgb(201, 201, 201);     border: none;     color: rgb(102, 102, 102);     font-weight: bolder;     border-radius: 5px 5px 0 0;     transition: background-color 0.4s linear;     outline: none; }   /* ------------------------------------------------------------------------------------- */ #confirmarEnegar {     width: 60px;     height: 23px;     border-radius: 5px 5px 0 0;     border: 1px solid rgb(100, 100, 100);     position: relative;     left: 574px;     display: none; }  #confirmar, #negar {     width: 50%;     height: auto;     float: left;     color: rgb(0, 0, 0); }  #confirmar {     border-right: 1px solid rgb(100, 100, 100);     background-color: rgb(0, 255, 0);     border-radius: 5px 0 0 0; }  #negar {     border-left: 1px solid rgb(100, 100, 100);     background-color: rgb(255, 0, 0);     border-radius: 0 5px 0 0;     font-size: 19px; }  #confirmar:hover {     cursor: pointer;     background-color: rgb(16, 190, 16); }  #negar:hover {     cursor: pointer;     background-color: rgb(192, 19, 19); } /* ------------------------------------------------------------------------------------- */   #remover:hover {     background-color: rgb(173, 173, 173);     color: rgb(80, 79, 79); }  th {     background-color: rgb(88, 88, 88);     color: rgb(255, 255, 255); }  th, td {     padding: 5px;     border: 1px solid rgb(175, 175, 175);     transition: background-color 0.4s linear; }  th:hover {     background-color: rgb(102, 101, 101); }  th:nth-child(1), td:nth-child(1) {     background-color: rgb(146, 145, 145);     color: rgb(255, 255, 255); }  th:nth-child(1):hover, td:nth-child(1):hover {     background-color: rgb(170, 169, 169); }  td:nth-child(1)::after {     counter-increment: contador-de-numero;     content: counter(contador-de-numero); }  td:hover {     background-color: rgb(245, 241, 241); }
<!doctype html> <html lang="pt-br"> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <meta name="author" content="Leandro do Nascimento">   <link rel="stylesheet" type="text/css" href="css/style.css">   <script src="js/script.js"></script>   <title>Cadastro de Pessoas</title> </head> <body>  <div id="cadastro-de-pessoas">   <h1 id="titulo1">Cadastro de Pessoas</h1>   <input id="nome" type="text" autocomplete="off" placeholder="Nome Completo:" minlength="8" maxlength="50">   <p id="nome-correto"></p>   <input id="cpf" type="text" maxlength="14" placeholder="CPF:">   <p id="cpf-correto"></p>   <p id="nota3"></p>   <button id="botao" type="button">Cadastrar</button>   <p id="cadastrado">Número de pessoas cadastradas: <span id="vermelho-e-azul">0</span></p> </div>  <div id="pessoas-cadastradas">   <h1 id="titulo2">Pessoas Cadastradas</h1>   <div id="container-de-dados">     <h1 id="titulo3">Vazio</h1>   </div> </div>  </body> </html>