dl dt dd リストの中に div を入れて横並びにさせるとdt dt に横幅をしてしても効きません。

Question

【HTML/CSS コーディング練習】入門編：レシピサイト／レシピページ

　のサイトでコーディングを勉強しています。

定義タグで

html

<dl class="ingredient-list">
  <dt>テキストテキスト</dt>
  <dd>1個</dd>
  <dt>テキストテキスト</dt>
  <dd>1個</dd>
  <dt>テキストテキスト</dt>
  <dd>1個</dd>
  <dt>テキストテキスト</dt>
  <dd>1個</dd>
  <dt>テキストテキスト</dt>
  <dd>1個</dd>
</dl>

css

.flex .recipe{
  width:50%;
  padding: 40px 5% 0;
}
.flex .recipe .ingredient-list{
  display:flex;
  flex-wrap:wrap;

.flex .recipe .ingredient-list dt{
  width:85%;
  border-bottom:dotted 1px #ccc;
  padding:6px 0;
}
.flex .recipe .ingredient-list dd{
  width:15%;
  border-bottom:dotted 1px #ccc;
  padding:6px 0;
  text-align:right;
}

このように指定すると横幅もきいて横に並んでくれるのですが、

下記のように　dt と　　dd をdiv で囲むと

<dl class="ingredient-list">
  <div>
  <dt>テキストテキスト</dt>
 <dd>1個</dd>
</div>
  <div>
  <dt>テキストテキスト</dt>
 <dd>1個</dd>
</div>
  <div>
  <dt>テキストテキスト</dt>
 <dd>1個</dd>
</div>
  <div>
  <dt>テキストテキスト</dt>
 <dd>1個</dd>
</div>
  <div>
  <dt>テキストテキスト</dt>
 <dd>1個</dd>
</div> 
  
</dl><!-- /.ingredient-list -->

.ingredient-list  div{
  display:flex;
  flex-wrap:wrap;


  
} 
.recipe .ingredient-list div dt{
  width:75%;
  display:flex;
}
 .recipe .ingredient-list div dd{
  width:25%;
  
}

dt と　dd に幅を指定しても何も効きません。

どうすれば、　dt と　dt の幅を設定できるのでしょうか？

試したこと

同じCSS　のセレクタ にcolor やfont を指定したら動作しましたが、幅を指定しても効きませんでした。

.ingredient-list div　にwidth:100% と幅を指定
したら、幅を設定できたのですが、

.flex .recipe{
width:50%;
padding: 40px 5% 0;
}

のwidth:50% を外しても　横並びになって　幅も保っていたので
原因がすっかり分からなくなりました。

Answer 1

詳しくはわからんけど.flexの子孫要素にmarginを0にする指定があるんじゃない？
ちょうど100パーセントにするときは子にmarginあったら100パーセント超えるから
横並びにならないんじゃないかと

dt,
dd {
  margin: 0;
  box-sizing: border-box;
}

.ingredient-list div {
  display: flex;
  flex-wrap: wrap;

}

.recipe .ingredient-list div dt {
  width: 75%;
}

.recipe .ingredient-list div dd {
  width: 25%;

}