当另一个较大时，如何删除div的顶部空间？

Question

我正在建立一个带有两个日历的网站，但是我对它们的位置有些麻烦。

一切似乎都很好，直到我更改为一个具有较多周数的月份（例如9月）。因此，日历更大了，并且在另一个日历上增加了不必要的空间：

html文件：

<div class="container">
  <div id="calendar1">
    <div class="vcal1-header">
      <button class="vcal1-btn" data-calendar1-toggle="previous">
        <svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
        </svg>
      </button>
      <div class="vcal1-header__label" data-calendar1-label="month"></div>
      <button class="vcal1-btn" data-calendar1-toggle="next">
        <svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
        </svg>
      </button>
    </div>
    <div class="vcal1-week">
      <span>Dl</span>
      <span>Dt</span>
      <span>Dc</span>
      <span>Dj</span>
      <span>Dv</span>
      <span>Ds</span>
      <span>Dg</span>
    </div>
    <div class="vcal1-body" data-calendar1-area="month"></div>
  </div>
  <div id="calendar2">
    <div class="vcal2-header">
      <button class="vcal2-btn" data-calendar2-toggle="previous">
        <svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
        </svg>
      </button>
      <div class="vcal2-header__label" data-calendar2-label="month"></div>
      <button class="vcal2-btn" data-calendar2-toggle="next">
        <svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
        </svg>
      </button>
    </div>
    <div class="vcal2-week">
      <span>Dl</span>
      <span>Dt</span>
      <span>Dc</span>
      <span>Dj</span>
      <span>Dv</span>
      <span>Ds</span>
      <span>Dg</span>
    </div>
    <div class="vcal2-body" data-calendar2-area="month"></div>
  </div>
</div>

css文件：

.container {
  text-align: center;
  margin: auto;
  margin: 10rem auto;
  max-width: 50%;
  min-height: 45vh;
}

.container #calendar1, .container #calendar2 {
  position: relative;
  display: inline-block;
  max-width: 45%;
  text-align: center;
  margin-top: 60px;
}

我尝试定义一个上边距：每个像素上都设置为0px，但这没有用。

日历也使用JavaScript文件，但是由于我的问题与HTML / CSS有关，因此我认为并不需要将其发布到这里。

这是每次外观的样子，顶部没有空格。我想在其底部留一个空格：

我该如何解决？预先谢谢你！