Buttons are not spaced with css present - html

Question

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>

Answer 1

#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>

Answer 2

Change .buttons form by .buttons > *
.buttons > * { margin: 0 10px; }

Answer 3

You selector is faulty, u have selected 'bottom form, INSTEAD of botto. The later would have selected all the 3 buttons n have applied the CSS rules to all the 3.

Answer 4

You would probably be better served with a specific class on the button but here I added the selector the the input based on type (probably not the way to do this; classes should be used to style)
.buttons {
display: flex;
}
.buttons form ,
.buttons input[type="button"] {
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>

Answer 5

As an option it is suitable for small projects, but for a larger project I recommend using classes.
To add styles to an element you can use: element Selector, id Selector, class Selector.
More information can be found here
.buttons {
display: flex;
}
.buttons form {
margin: 0 10px;
}
input:nth-child(2){
margin: 0 10px 0 0;
}
<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>