Сетка раскладывается при масштабировании

Question

Я пытаюсь исправить проблему с макетом с помощью старого кода.Он использует сеточную систему, причем рассматриваемая строка имеет 3 столбца и 9 столбцов.При увеличении делитель из 9 столбцов опускается ниже элемента из 3 столбцов.

Ширина уже установлена ​​в процентах.Я попытался полностью удалить поля на тот случай, если они вызвали проблему, но, похоже, это не помогло, поэтому я добавил их заново.Я также попытался применить float: left к col-9 div.

Вот соответствующий раздел HTML.

<div class="row list-main">
    <div class="list-lists-table col-3">
      <!-- super secret stuff goes here -->
    </div>
    <div class="list-candidate-table col-9">
      <!-- more secret stuff -->
    </div>
</div>

Вот соответствующие классы CSS

.list-main {
  width: 90%;
  margin: 28px auto 0 auto;
}

.list-lists-table {
  width: 100%;
  max-width: 270px;
  padding: 0;
  margin-left: 18px;
}

.list-candidate-table {
  width: 100%;
  max-width: 945px;
  margin-left: 25px;
  padding: 0;
  position: relative;
}