Issue With Floating Buttons Right Of My To Do List

I'm trying to create a to-do list app with jquery or bootstrap. Just css grid and vanilla js. I'm currently having an issue floating my 'delete' buttons of list items to the right.

Solution 1:

Have you tried:

button {
   float:right;
}

Solution 2:

I think the problem has something to do with the button margin. The margin (10px) is bigger than the row so it will push the bottom buttons to the left. Just change the margin: 10px; to margin: 7px 10px 7px 10px;

button {
    margin: 7px10px7px10px;
    padding: 10px10px;
    background-color: green;
    border: none;
    color: white;
    font-size: 14px;
    float: right;
}

Solution 3:

Use flexbox on parent element and justify-content: flex-end.