Почему размер SELECT меньше INPUT в HTML

Question

Я пытался создать форму, в которой я столкнулся с проблемой: размер элементов SELECT и INPUT различен. В следующем: почему div с элементом SELECT меньше, чем div с элементом Input (Вы можете увидеть небольшой разрыв с малиновым цветом).

* {
  box-sizing: border-box;
}

.row {
  background-color: crimson;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  background-color: cornflowerblue;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

div.addPost form {
  background-color: #F5F9FE;
  width: 100%;
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
}

div.addPost form select {
  font-size: 1rem;
}

div.addPost form [class*="col-"] {
  margin-bottom: 1rem;
}

<form action="" method="get">
  <div class="row">
    <div class="col-6">
      <label for="">Post Title</label>
      <input type="text" maxsize="255">
    </div>
    <div class="col-6">
      <label for="">Post Category</label>
      <select name="" id="">
        <option value="">First</option>
        <option value="">Second</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <label for="">Post Author</label>
      <input type="text" maxsize="255">
    </div>
    <div class="col-6">
      <label for="">Post Category</label>
      <select name="" id="">
        <option value="">Draft</option>
        <option value="">Active</option>
      </select>
    </div>
  </div>
</form>

Я уже пытался присвоить одно и то же значение свойству font-size для обоих элементов, но это не работает. Пожалуйста, объясните причину этого. Как мне убрать этот пробел?