dlが横並びにならない

dlの中のdt,ddを横並びにしたいです。
下記コードを書いて試しましたが、横並びになりません。

どこが間違っているのかご指摘頂きたいです。
初心者の質問で申し訳ないです。
よろしくお願いします。

<section id="news" class="wrapper">
    <h2>News</h2>
    <dl>
      <dt><time datetime="2021.10.26">2021.10.26</time></dt>
      <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
      <dt><time datetime="2021.10.26">2021.10.26</time></dt>
      <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
      <dt><time datetime="2021.10.26">2021.10.26</time></dt>
      <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
      <dt><time datetime="2021.10.26">2021.10.26</time></dt>
      <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
      <dt><time datetime="2021.10.26">2021.10.26</time></dt>
      <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
    </dl>
  </section>

#news h2{
  text-align: center;
  margin-bottom: 20px;
}
#news dl{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid #c8c8c8;
  margin-bottom: 40px;
}
#news dt{
  width: 20%;
  border-bottom: 1px solid #c8c8c8;
  padding: 15px;
}
#news dd{
  width: 80%;
  border-bottom: 1px solid #c8c8c8;
  padding: 15px;
}

行動規範の内容に同意します

回答2件

dl と dd の幅をそれぞれ20%と80%で、合わせて100%にてしますが、
それぞれ、パディングを15px設定しているので、それを足して100%超えるので、
折り返してしまいます。
また、ddにはデフォルトの左マージンがありますので、それも影響します。

左マージンは0に設定して、幅の計算法をパディングを含めるように変更すればいいでしょう。

css
1#news dt{
2  width: 20%;
3  border-bottom: 1px solid #c8c8c8;
4  padding: 15px;
5  box-sizing: border-box; /* 追加 */
6}
7#news dd{
8  width: 80%;
9  border-bottom: 1px solid #c8c8c8;
10  padding: 15px;
11  margin-left: 0;         /* 追加 */
12  box-sizing: border-box; /* 追加 */
13}