dtタグとddタグが横並びにならない

Question

dtタグとddタグ画横並びにならなくて困っています。

HTMLコード

<section id="company" class="wrapper"> <div class="text"> <h2 class="sec-title"> <span class="en">COMPANY</span> <span class="ja">会社情報</span> </h2>

  <dl class="info">
    <dt>会社名</dt>
    <dd>株式会社・・・</dd>
    <dt>所在地</dt>
    <dd>東京都新宿区・・・</dd>
    <dt>代表</dt>
    <dd>・・・・・</dd>
    <dt>設立</dt>
    <dd>2021年8月17日</dd>
    <dt>資本金</dt>
    <dd>1000億</dd>
    <dt>事業内容</dt>
    <dd>Web制作・マーケティング</dd>
        <dd class="add">インターネットメディア事業</dd>
        <dd class="add">プロモーション企画・制作</dd>
        <dd class="add">ソーシャル企画・運営</dd>
  </dl>
  </div>

  <div class="img">
    <img src="img/company.jpg" alt="">
  </div>
</section>

CSSコード
#company {
margin-top: 120px;
margin-bottom: 250px;
display: flex;
position: relative;
height: 750px;
}

#company .text {
background: white;
width: 55%;
padding: 100px 8% 100px 6%;
top: 0;
left: 0;
position: absolute;
}

#company .img {
width: 53%;
position: absolute;
top: 115px;
right: 0;

}
#company .info {
display: flex;
align-items: center;
flex-wrap: wrap;
}

#company .img img {
width: 100%;
height: 400px;
object-fit: cover;
}
#company .info dt {
width: 20%;
margin-top: 10px;
}

#company .info dd {
width: 80%;
margin-top: 10px;
}
#company .info .add {
margin-left: 20%;
}

Comments

[yambejp]

以前も指摘されていたと思いますが、質問はテキストベースでお願いします

[int32_t]

CSSも開示してください。
コードは画像ではなくテキストで貼り付けてください。画像だと回答を書くのがかなり手間になります。

Answer 1

<dd> にはデフォルトでマージンがあるため、20% + マージン + 80% で1行に入り切らなくなってます。

#company .info dd のルールセットに margin-inline-start: 0px; を入れればよいでしょう。