Bredde på div elementer

Jeg har en "tabel" bestående af div elementer, hvor indholdet af den enkelte række hentes fra SQL. I den øverste række (under overskriften), er der mulighed for at tilføje ny række, dvs. det er input felter. I den række, der får div elementerne en større bredde og jeg kan ikke greje hvorfor. Det er meningen at de skal have samme bredde som de øvrige rækker.

På en eller anden måde, så er det <form> der giver den forskellige bredde. Hvis jeg fjerner <form>, er bredden den samme i alle rækker.

Fra CSS filen:
.responsive-table {
  list-style-type: none;
  padding: 0;
}

  li {
    border-radius: 5px;
    padding: 15px 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    width: auto;
  }

  .table-header {
    background-color: #95A5A6;
    font-size: 14px;
    font-weight: Bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
  }

  .table-row {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
    display: flex;
    width: auto;
  }

.col {
        flex: 1;
        border: 1px solid black;
        padding: 5px;
}

  .col-1 {
    width: 250px;
    display: inline-block;
  }

  .col-2 {
    width: 300px;
    display: inline-block;
  }

  .col-3 {
  width: 350px;
    display: inline-block;
  }

  .col-4 {
  width: 350px;
    display: inline-block;
  }

  .col-5 {
  width: 250px;
  display: inline-block;
  }

.col-6 {
  width: 250px;
  display: inline-block;
  }
 
@media all and (max-width: 2500px) {

.table-header {
      display: none;
    }


Overskriften:
<div class="container">
<h2>Teammøde referat</h2>
<ul class="responsive-table">
<li class="table-header">
    <div class="col col-1">Dato</div>
    <div class="col col-2">Punkt</div>
    <div class="col col-3">Referent</div>
    <div class="col col-4">Emne</div>
    <div class="col col-5">Indhold</div>
    <div class="col col-6">Ret</div>
</li>

1. række med input felter:
echo "<li class='table-row'>";
echo "<form>";
echo "<div class='col col-1'><input type='date' name='Dato'></div>";
echo "<div class='col col-2'><input type='text' name='Punkt' placeholder='Punkt'></div>";
echo "<div class='col col-3'><input type='text' name='Referent' placeholder='Referent'></div>";
echo "<div class='col col-4'><input type='text' name='Emne' placeholder='Emne'></div>";
echo "<div class='col col-5'><input type='text' name='Indhold' placeholder='Indhold'></div>";
echo "<div class='col col-6'><button type='submit' title='Tryk her for at oprette nyt punkt' id='Ret' value='ret'>Opret</button></div>";
echo "</form>";
echo "</li>";

Eksempel på e øvrige rækker hentet fra sql:
echo "<div class='col col-2'>" . $row["Punkt"] . "</div>";
echo "<div class='col col-3'>" . $row["Referent"] . "</div>";
echo "<div class='col col-4'>" . $row["Emne"] . "</div>";
echo "<div class='col col-5'>" . $row["Indhold"] . "</div>";