dd dtでできた余白を無くしたい

Question

前提・実現したいこと

dl dd dtを利用してhtmlを記載しています。
めざしている内容は下記URLの「　DETAIL箇所　」です。
リンク内容

私のコードではこのように見えてしまい、変な余白が生まれ一部横並びになりません。
ご質問は下記です。よろしくお願いします。
・　矢印で示している余白は何でしょうか？
・　この余白を消すためにはどうすれば良いでしょうか？
余白箇所：著者の右・出版年の左右の余白など

![

該当のソースコード

<div class="content" id="detail">
  <div class="content_inner">
   <h3>DETAIL</h3>
   <div class="flex">
     <div class="flex_inner">
       <img src="img/book.jpg" id ="detail_img" alt="title book image">
     </div>
     <div class="flex_inner">
       <h3>タイトルタイトルタイトル</h3>
       <dl>
        <dt>著者　</dt>
        <dd>タイトルタイトルタイトル</dd>
        <dt>出版年</dt>
        <dd>タイトルタイトルタイトル</dd>
        <dt>発行年</dt>
        <dd>タイトルタイトルタイトル</dd>
       </dl>
       <p>テキストテキストテキストテキスト
       テキストテキストテキストテキスト
       テキストテキストテキストテキスト
       </p>
       <p><a href="#">オンラインストアで見る</a></p>
      </div>
    </div>
   </div>
</div>
             

.content{
    max-width: 1000px;
    margin: 10px auto 30px auto;
}

.content_inner{
    padding: 30px 180px 30px 180px;
}

.flex{
    display: flex;
}

#detail_img{
    width: 270px;
    margin-right: 60px;
}

dl{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
}

dt{
    width: 25%;
    padding: 0 0;
}

/*dd{*/
/*    width: 75%;*/
/*    margin: 0 0;*/
    
/*}*/

a{
    color: black;
}

Comments

[m.ts10806]

画像２枚あるんでしょうか。
質問本文見られたら分かる通り、おそらくずれてます。
質問は編集できますので、適宜調整してください。
投稿前にプレビューで確認すると良いです。

[itagagaki]

再現できません
.flex_inner に対するCSSコードが無いからでしょうか？

[mariposa]

m.ts10806さん
画像修正しました。2枚に見えてたんですね、失礼しました。

itagagakiさん
HTMLとCSSにつき追記しました。
ご確認いただければ幸いです。

[itagagaki]

HTMLにはclass="flex_inner"が残っていますが、CSSに .flex_innerが無いですよ

Answer 1

”リンクの内容”　を私が利用している Webブラウザ（ バージョン: 91.0.4472.124（Official Build） （64 ビット）)で確認しました。

ただし、 ddの スタイルは user agent stylesheet が適用されていました。

つまり、ブラウザのデフォルトを、そのまま利用しており、結果オーライになっています。

サンプルと同様の結果を求めるなら、 ccs から dd の指定を外す。
という方法でいかかでしょうか？　

dd{
    width: 75%;
    margin: 0 0;
}   

Comments

[mariposa]

Yoshi88さん
ご丁寧にありがとうございます。
ddのCSSの指定をすべて外してみたのですが、解決できませんでした。
なぜかddにmargin-leftがついています。
dtとddの右側にも不明な余白は残っています。