How do I control the horizontal space between dt and dd in this grid-based description list?

I'm trying to create a concert set list that looks like this:

I:   Song 1, Song 2, Song 3, Song 4, Song 5,
     Song 6, Song 7

II:  Song 10, Song 11, Song 12, ...

E:   Song 20

Here is the code I've tried. It almost does what I want, except that I can't find how to control the width of the gutter between each dt and dd. I want to reduce the gap. I've noted in the CSS the various things I've tried.

I'm a beginner at HTML/CSS so I'd also welcome suggestions if there's a better approach to doing this. I want this to be responsive, and avoid older things (e.g. float) that I've read can be accomplished better using more modern features (e.g. grid and flex).

   * {
      box-sizing: border-box;
   }

   body {
      background-color: black;
      background-attachment: fixed;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 90%;
   }
   .headline-div {
     margin-top: 1em;
     margin-bottom: 1em;
     font-weight: bold;
     font-size: 110%;
     color: red;
   }

   .setlist-dl {
     display: grid;
     column-gap: 0; /* Thought this would reduce the gap but no */
     grid-template-columns: max-content auto;
   }
   .setlist-dt {
     grid-column-start: 1;
     color: yellow;
     #margin-right: 0; /* Also tried this */
   }
   .setlist-dd {
     grid-column-start: 2;
     margin-bottom: 10px; /* put some vertical space between each set */
   }
   .setlist-songs-ul {
     margin: 0;
     padding: 0;
   }
   .setlist-song-li {
     color: green;
     display: inline; /* makes it horizontal */
   }

   /* Show outlines of divs and dl components for troubleshooting */
   div, dt, dd, dl {
      outline-style: dotted;
      outline-color: green;
      outline-width: 1px;
   }
   */

<html>

<body>
<!-- SHOW -->
<div class="headline-div">
  <span id="1981">5/1/81 [Fri] Grateful Dead - Hampton Coliseum, Hampton, VA</span>
</div>
<div>
  <dl class="setlist-dl">
    <!-- SETLIST 1 -->
    <dt class="setlist-dt">
      I:
    </dt>
    <dd class="setlist-dd">
      <ul class="setlist-songs-ul">
        <li class="setlist-song-li">Alabama Getaway></li>
        <li class="setlist-song-li">Promised Land,</li>
        <li class="setlist-song-li">Friend Of The Devil></li>
        <li class="setlist-song-li">Me & My Uncle></li>
        <li class="setlist-song-li">Big River,</li>
        <li class="setlist-song-li">Althea></li>
        <li class="setlist-song-li">Little Red Rooster,</li>
        <li class="setlist-song-li">Tennessee Jed></li>
        <li class="setlist-song-li">Let It Grow></li>
        <li class="setlist-song-li">Deal</li>
      </ul>
    </dd>
    <!-- SETLIST 2 -->
    <dt class="setlist-dt">
      II:
    </dt>
    <dd class="setlist-dd">
      <ul class="setlist-songs-ul">
        <li class="setlist-song-li">Feel Like A Stranger></li>
        <li class="setlist-song-li">Franklin's Tower></li>
        <li class="setlist-song-li">Lost Sailor></li>
        <li class="setlist-song-li">Saint Of Circumstance></li>
        <li class="setlist-song-li">He's Gone></li>
        <li class="setlist-song-li">The Other One></li>
        <li class="setlist-song-li">Drums></li>
        <li class="setlist-song-li">Space></li>
        <li class="setlist-song-li">The Wheel></li>
        <li class="setlist-song-li">Wharf Rat></li>
        <li class="setlist-song-li">Sugar Magnolia</li>
      </ul>
    </dd>
    <!-- SETLIST 3 -->
    <dt class="setlist-dt">
      E:
    </dt>
    <dd class="setlist-dd">
      <ul class="setlist-songs-ul">
        <li class="setlist-song-li">U.S. Blues</li>
      </ul>
    </dd>
  </dl>
</div>
</body>
</html>

Solution

You tried setting margin-right on the <dt> elements, but that defaults to 0.

Set margin-left on the <dd> elements.

I found this by examining the <dd> and <dt> elements in Developer Tools. Looking at the layout tab for each showed where space was being added by the browser by default.

^{Screenshot from Firefox Developer Tools}