缩放时网格布局中断

Question

我正在尝试使用一些较旧的代码来解决布局问题。它使用网格系统，该行具有3列和9列div。放大时，第9列div会下降到第3列div之下。

宽度已设置为百分比。我尝试完全消除页边距，以防万一这些页边距造成了问题，但似乎无济于事，所以我重新添加了它们。我还尝试将colt：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;
}