Buttons are not spaced with css present

Issue

I'm having a problem with buttons in CSS.

Between the first two I get the right distance, but between the second and the third I get two buttons joined (attached) (as in the picture).

How can I solve this problem?

.buttons {
  display: flex;
}

.buttons form {
  margin: 0 10px;
}

<div class="buttons">
  <form action="createArt.html">
    <input type="submit" value="ADD" />
  </form>
  <input type="button" value="EDIT" onclick="confirmation_edit()" />
  <input type="button" value="DELETE" onclick="confirmation_delete()" />
</div>

Solution

#container {
            display: flex;
            //justify-content:space-around;
        }

        .butts, form {
            margin-left: 10px;
            
            
        }

<div id="container">
        <form action="createArt.html">
            <input type="submit" value="ADD" >
        </form>

        <input class='butts'type="button" value="EDIT" >

        <input class='butts' type="button" value="DELETE" >
    </div>

Answered By - DCR