Usando a tag de formulário ao uso da tag ancora

Isso deve estar ocorrendo porque você colocou um formulário dentro do outro.

Para fazer o que você quer (criar um botão de atualizar), você poderia ter deixando como link . Bastaria apenas aplicar o efeito de botão no link, inserido as classes do Bootstrap. Exemplo:

<a href="altera-produto.php?id=<?=produtos['id']?>" class="btn btn-danger">teste</a>

Não faz muito sentido, não acha?

Sendo que são blocos diferentes. Então como faço para usar 2 formulários, sem, que, um sobrescreva o outro?

Ou essa meneira é excruciamente exclusa das boas práticas do HTML?

Isso não é algo permitido. Você pode conferir na documentação do HTML

https://www.w3.org/TR/html5/forms.html#the-form-element

Isso aparece no item 4.10.3

4.10.3. The form element
(...)
Flow content, but with no form element descendants.

Uma forma de contornar isso é colocar os forms em separado e usar javascript para alterar o id e fazer a postagem. Exemplo:

<form name="form1" action="">
    <?
    while ($produtos=mysql_fetch_array($resultados)) {
    ?>
    <p><a href="#" onclick="EnviarFormulario(<?=produtos['id']?>)">Produto <?=produtos['id']?></a></p>
    <?
    }
    ?>
</form>


<form name="form2" action="altera-produto.php">
    <input type="hidden" name="id" value="">
</form>

<script type="text/javascript">
    function EnviarFormulario(produto){
        document.form2.id.value = produto;
        document.form2.submit();
    }
</script>