dtとddを横並びにしてborder-bottomを繋げたい

dtとddを横並び、border-bottomを繋げたいのですが、上手くいきません。
id="news"に＊とcontainerを当ててだけだと上手くデザインが出来ます。
他の場所に問題があるのでしょうか？

HTML
1<body>
2    <div class="container">
3        <header>
4        <h1 class="logo">MyWork</h1>
5        <nav>
6        <ul>
7            <li><a href="#about">About</a></li>
8            <li><a href="#work">Work</a></li>
9            <li><a href="#news">News</a></li>
10            <li><a href="#contact">Contact</a></li>
11            <li><a href="https://www.instagram.com/?hl=ja"><i class="fab fa-instagram"></i></a></li>
12        </ul>
13        </nav>
14    </header>
15    </div>
16    <img  class="top" src="http://placehold.jp/150x50.png">
17   <div class="container">
18    <div class="main"> 
19        <h2 id="about">About</h2>
20        <ul>
21            <li>テキスト</li>
22            <li>住所</li>
23            <li>電話番号</li>
24            <li>URL</li>
25            <li>mail</li>
26        </ul>
27        <p>プロフィールテキストテキストテキストテキストテキストテキストテキストテキスト</p>
28
29    </div>
30</div>
31<div class="container">
32    <div id="work">
33        <h2>Work</h2>
34        <div class="img-list">
35        <img src="http://placehold.jp/150x50.png">
36        <img src="http://placehold.jp/150x50.png">
37        <img src="http://placehold.jp/150x50.png">
38        <img src="http://placehold.jp/150x50.png">
39        <img src="http://placehold.jp/150x50.png">
40        <img src="http://placehold.jp/150x50.png">
41        </div>
42    </div>
43
44    <div id="news">
45        <dl>
46            <dt>2021.xx.xx</dt>
47            <dd>テキストテキストテキスト</dd>
48            <dt>2021.xx.xx</dt>
49            <dd>テキストテキストテキスト</dd>
50            <dt>2021.xx.xx</dt>
51            <dd>テキストテキストテキスト</dd>
52            <dt>2021.xx.xx</dt>
53            <dd>テキストテキストテキスト</dd>
54            <dt>2021.xx.xx</dt>
55            <dd>テキストテキストテキスト</dd>
56        </dl>
57    </div>
58 </div>   
59</body>
60</html>

CSS
1*{
2    margin: 0;
3    padding: 0;
4}
5
6header {
7    height: 200px;
8    margin-top: 30px;
9    display: flex;
10}
11
12.container {
13    margin-right: auto;
14    margin-left: auto;
15    max-width: 960px;
16}
17
18nav {
19    margin-left: auto;
20    margin-top: 15px;
21}
22nav ul{
23    display: flex;
24}
25nav ul li {
26    list-style:none ;
27    margin-left: 20px;
28    display: inline-block;
29    }
30
31nav ul li a{
32  color: black; 
33  text-decoration: none;
34}  
35
36.top {
37    width: 100vw;
38    height: 500px;
39}
40.main {
41    margin-top: 100px;
42    height: 500px;
43
44}
45.main h2 {
46    text-align: center;
47}
48.main ul {
49    margin-top: 100px;
50}
51.main ul li {
52    list-style: none;
53}
54
55.main ul li:first-child,:last-child {
56    margin-bottom: 20px;
57}
58
59#work {
60    text-align: center;
61
62}
63.img-list{
64    display: flex;
65    flex-wrap: wrap;
66    justify-content: center;
67}
68
69.img-list img{
70    width: 300px;
71    height: 150px;
72    margin-right: 20px;
73    margin-top: 30px;
74}
75
76
77
78#news{
79    margin-top: 50px;
80}
81dl {
82    width:100%;
83    border-top: solid 1px #c8c8c8;
84    
85}
86.list {
87    display: flex;
88    height: 50px;
89}
90dt{
91    border-bottom: solid 1px #c8c8c8; 
92    width: 30%; 
93   
94}
95dd { 
96    width: 70%;
97   border-bottom: solid 1px #c8c8c8; 
98   padding-bottom: 10px;
99   
100}
101

itagagaki

2021/10/19 02:09 編集

どこにどんな問題があるのかわかりませんでした。問題をもっと詳しく書いてください。

misaki.

2021/10/19 02:33

言葉足らずですみません。 dtとddのborder-bottomを繋げたいのですが、ddのborder-bottomがテキストの真下に付き、その下にmarginが付いて、思ったようなデザインになりません。

itagagaki

2021/10/19 02:57

> ddのborder-bottomがテキストの真下に付きそうはなっていませんよ。 https://codepen.io/itagagaki/pen/vYJKBVx

misaki.

2021/10/20 05:21

ありがとうございます。コードを全て載せて、更新しました。

itagagaki

2021/10/20 10:04 編集

うーん、これは、もしHTMLタグの意味論的に問題が無ければ（つまりdl=定義リスト、という意味を文書に持たせることにこだわりがないなら）、tableで表現するほうが良いのではないかと思いましたが、どうですか？

misaki.

2021/10/21 01:03

ありがとうございます。特にこだわりがなかったのでtableで作ったら上手くいきました。

itagagaki

2021/10/21 01:10

解決したのなら、どう解決したかを自分で回答として書いて、この質問を解決済みにしてください。

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

回答1件

ちょっと質問の意図がわかりませんが、marginを0にして余白があるならpaddingも0にしてみてください
余白をなくしたいのでしたら.listに設定したheight: 50px;も削除した方がよいでしょう

投稿2021/10/19 02:16

yambejp

総合スコア115012

misaki.

2021/10/20 05:20

遅くなってしまい申し訳ありません。内容を追記して更新してみました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

dtとddを横並びにしてborder-bottomを繋げたい

関連した質問