title: How to make the width of "detail" elements consistent?
body: <p>I am currently working on a website and am having difficulty with some <code>detail</code> elements.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var coll = document.getElementsByClassName("collapsible");
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1, p , body &gt; ul, ol{
      text-align: center;
      align-self: center;
      background-color: rgba(255, 255, 255, 0.6);
      width: 40%;
      margin: 20px 29%;
      padding: 5px 3%;
  }
  
  h1 {
      font-family: 'Press Start 2P';
      font-size: 40px;
  }
  
  p, ul, ol {
      font-family: "Turret Road";
      font-size: 20px;
  }
  
  
  .left-column {
      width: 45%;
      float: left;
      margin: 0 2.5%;
          padding: 0;
  }
  
  .right-column {
      width: 45%;
      float: right;
      margin: 0 2.5%;
      padding: 0;
  }
  
  .column &gt; li {
      width: 45%;
  }
  
  .classic {
      background-image: url("classic.jpg"); /* aspect ratio is 3:2 */
      background-size: 100%;
  }
  
  .futurunk {
      background-image: url("futurunk.jpeg"); /* aspect ratio is 16:9 */
  }
  
  .eccojams {
      background-image: url("eccojams.jpg"); /* aspect ratio is 1751:889 */
  }
  
  .mallsoft {
      background-image: url("mallsoft.jpg"); /* aspect ratio is 125:83 */
  }
  
  .synthwave {
      background-image: url("synthwave.png"); /* aspect ratio is 16:9 */
  }
  
  .latenight {
      background-image: url("latenight.jpg"); /* aspect ratio is 16:9 */
  }
  
  .chillwave {
      background-image: url("chillwave.jpg"); /* aspect ratio is 16:9 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div&gt;
          &lt;p&gt;Each of the 8 stages revolve around a certain theme:&lt;/p&gt;
          &lt;ul class="left-column" class="column"&gt;
              &lt;li&gt;&lt;details class="classic"&gt;
              &lt;summary&gt;&lt;h1&gt;"Classic" vaporwave&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;details class="futurunk"&gt;
              &lt;summary&gt;&lt;h1&gt;Future Funk&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;details class="eccojams"&gt;
              &lt;summary&gt;&lt;h1&gt;Eccojams&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;details class="mallsoft"&gt;
              &lt;summary&gt;&lt;h1&gt;Mallsoft&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="right-column" class="column"&gt;
              &lt;li&gt;&lt;details class="synthwave"&gt;
              &lt;summary&gt;&lt;h1&gt;Synthwave&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;details class="latenight"&gt;
              &lt;summary&gt;&lt;h1&gt;Late Night LoFi&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;details class="chillwave"&gt;
              &lt;summary&gt;&lt;h1&gt;Chillwave&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;details class="vaportrap"&gt;
              &lt;summary&gt;&lt;h1&gt;Vaportrap&lt;/h1&gt;&lt;/summary&gt;
              &lt;/details&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want the expandable elements to be both the same width and expand to the same aspect ratio as the images, but neither of these happen. Instead, the boxes are all different sizes and only expand a bit upon opening. How do I make the width consistent?</p>