Structure of nested Divs with a table

Question

I'm a new frontend programmer.

I'm making a web site with flask, and to be honest, I don't know much about front-end so I don't know if what I'm doing is best practices. In one section, I have a div containing other divs with a table.

My concern is if I'm using the right structure for that, so that's why I'm asking people with more expertise in this field. I changed some things so it would be pureHTML, CSS and JS, but the data in the table appears dynamically if there is some data in the data base.

  function validate() {
    // check if input is bigger than 3
    var value = document.getElementById("expense-name").value;
    if (value.length < 1) {
      return false; // keep form from submitting
    }

    // else form is good let it submit, of course you will
    // probably want to alert the user WHAT went wrong.

    return true;
  }

body{
    background-color: bisque;
    font-family: Arial, Helvetica, sans-serif;
}


/* index.html */
/* Container to center the div container */
.super-container{
    display: flex;
    justify-content: center;
    align-items: center;
    
    
}
/* Centering the container */
.container{
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    box-sizing: border-box;
    padding: 1%;
    min-height: 30vh;
    width: 78vw;
    background-color: white;
}

/* Deletes the arrows of inputs fields */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    appearance:textfield; /* Firefox */
}


/* Adding border, padding, and font size of caption to table*/
.container h2{
    padding: 10px 0;
    font-size: 25px;
    font-weight: 600;
}

.container td{
    border: 1px groove rgba(0, 0, 0, 0.178);
    box-sizing: border-box;
    background-color: white;
    text-align: center;
    width: 40%;
    padding: 5px;
}

.container table{
    margin: 10px auto;
    height: 50%;
    border: 2px groove rgba(0, 0, 0, 0.178);
    border-collapse: collapse;
    width: 70%
}

.container th{
    border: 1px groove rgba(236, 0, 0, 0.178);
    background-color: whitesmoke;
    padding: 10px 45px;
    box-sizing: border-box;
    width: 50%;
}

<div class="super-container">
  <div class="container">
    <h2>Expense Tracker</h2>
    <form action="/" method="post">
      <input type="text" name="name" placeholder="test" required />
      <input type="number" name="amount" placeholder="Amount" required />
      <select name="category" id="">
        <option>Opcion 1</option>
      </select>
      <input type="date" name="date" />
      <input type="submit" name="" id="" />
    </form>
    <table>
      <tr>
        <th>Expense Name</th>
        <th>Amount</th>
        <th>Category</th>
        <th>Date</th>
        <th>Action</th>
      </tr>
      <tr>
        <td>Test1</td>
        <td>Test1</td>
        <td>Test1</td>
        <td>Test1</td>
        <td>
          <form
            action="{{ url_for('delete_item', id=expense.id)}}"
            method="POST"
          >
            <input type="submit" value="Delete" />
          </form>
        </td>
      </tr>
    </table>
  </div>
</div>