如何停止详细信息部分以延长页面长度？

Question

我的页面上有多个详细信息部分，每次打开它都会稍微扩展我的页面，尽管在关闭详细信息部分时它不会返回。这些部分几乎都在那里，所以我现在不希望将其更改。当我启动该站点时，我想尽可能避免使用引导程序，但是我想这样做会容易得多。谢谢。

.main-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  height: 600px;
  margin: 0 auto;
  justify-self: center;
  margin-bottom: -1em;
}

.btn1 {
  width: 18em;
  background: none;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  text-shadow: 0px 0px 0px transparent;
}

.card {
  width: 18em;
  justify-self: center;
  margin: 0;
  padding: 2em 1em 0;
}

.card img {
  margin: 0 0 5px 0;
  width: 18em;
  height: auto;
}

summary {
  width: 18em;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #202020;
  background: #808080;
  cursor: pointer;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

summary::-webkit-details-marker {
  display: none;
}

.fa.fa-angle-down {
  transition: .15s transform ease-in-out;
}

details[open] .fa.fa-angle-down {
  transform: rotate(180deg) translateY(-.2em);
}

summary:focus {
  outline-style: none;
  background: #404040;
  color: #fef;
}

details {
  max-height: 400px;
  width: 17.55em;
  color: #fef;
  background: #212529;
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0;
  margin: -.25em 0 -2em;
  border-right: solid 1px #b5b5b5;
  border-bottom: solid 1px #b5b5b5;
}

.contentul li {
  padding: 1em;
}

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="main-container" id="main-container">
  <div class="card" id="card">
    <details>
      <summary id="s1"><img id="img1" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ex1">Excavators<br><i class="fa fa-angle-down" id="i1"></i></summary>
      <ul class="contentul">
        <li>180° Wheeled</li>
        <li>360° Wheeled</li>
        <li>360° Tracked</li>
      </ul>
    </details>
  </div>
  <div class="card">
    <details>
      <summary id="s2"><img id="img2" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="dz1">Dozers<br><i class="fa fa-angle-down" id="i2"></i></summary>
      <ul class="contentul">
        <li>180° Wheeled</li>
        <li>360° Wheeled</li>
        <li>360° Tracked</li>
      </ul>
    </details>
  </div>
  <div class="card">
    <details>
      <summary id="s3"><img id="img3" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="th1">telehandlers<br><i class="fa fa-angle-down" id="i3"></i></summary>
      <ul class="contentul">
        <li>180° Wheeled</li>
        <li>360° Wheeled</li>
        <li>360° Tracked</li>
      </ul>
    </details>
  </div>
</div>