liタグの中身がliの中に収まらない

前提・実現したいこと

html、cssでyoutuberさんの模写コーディング練習をまねして。コーディングの練習をしています。
body>main>information>ul>liの部分で、liの中に<time>と<p>を入れてliの中でこの2つのブロックを改行したいです。

発生している問題・エラーメッセージ

body>main>information>ul>liの部分で、liの中に<time>と<p>を入れているのですが、改行されるとき<p>の中に記述されている部分がliの中に収まらない。ということが起きて困っています。
html上ではliの中にtimeとpが収まっているのに、ブラウザで示していると、以下のようになります。
(左が私のコードで、右がお手本のコードです。下はディベロッパーツールの表示です。）

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="description" content="">
6    <meta name="author" content="">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="responsive.css">
9    <link rel="stylesheet" href="style.css">
10    <title>Colerfl-clover</title>
11    <link rel="shortcut icon" href=" ">
12  </head>
13
14  <body>
15    <header>
16      <div class="container">
17        <h1><a href="#" alt="colorful clover"><img src="image/logo.png"></a></h1>
18        <ul>
19          <li><a href="#">Information</a></li>
20          <li><a href="#">Gourmet</a></li>
21          <li><a href="#">Contact</a></li>
22        </ul>
23     </div>
24    </header>
25
26    <div id="key-visual">
27      <div class="container">
28
29        <img src="image/img_bg.jpg">
30      </div>
31    </div>
32
33    
34
35    <main>
36        <section class="information">
37
38          <h2>Information</h2>
39          <ul>
40            <li><time datetime="2020.08.20">2020.08.20</time>
41              <p>Webの神様｣ 動画UP！</p></li>
42            <li class="brown"><time datetime="2020.08.17">2020.08.17</time>
43              <p>｢Webの神様｣ 動画UP！</p></li>
44            <li><time datetime="2020.08.08">2020.08.08</time>
45             <p>夏季休業のお知らせ</p></li>
46            <li class="brown"><time datetime="2020.08.05">2020.08.05</time> 
47              <p>サイトをオープンしました！</p></li>
48          </ul>
49        </section>
50

css
1@charset="UTF-8"
2
3/*
4html5doctor.com Reset Stylesheet
5v1.6.1
6Last Updated: 2010-09-17
7Author: Richard Clark - http://richclarkdesign.com
8Twitter: @rich_clark
9*/
10
11html, body, div, span, object, iframe,
12h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13abbr, address, cite, code,
14del, dfn, em, img, ins, kbd, q, samp,
15small, strong, sub, sup, var,
16b, i,
17dl, dt, dd, ol, ul, li,
18fieldset, form, label, legend,
19table, caption, tbody, tfoot, thead, tr, th, td,
20article, aside, canvas, details, figcaption, figure,
21footer, header, hgroup, menu, nav, section, summary,
22time, mark, audio, video {
23    margin:0;
24    padding:0;
25    border:0;
26    outline:0;
27    font-size:100%;
28    vertical-align:baseline;
29    background:transparent;
30}
31
32body {
33    line-height:1;
34}
35
36article,aside,details,figcaption,figure,
37footer,header,hgroup,menu,nav,section {
38    display:block;
39}
40
41nav ul {
42    list-style:none;
43}
44
45blockquote, q {
46    quotes:none;
47}
48
49blockquote:before, blockquote:after,
50q:before, q:after {
51    content:'';
52    content:none;
53}
54
55a {
56    margin:0;
57    padding:0;
58    font-size:100%;
59    vertical-align:baseline;
60    background:transparent;
61}
62
63/* change colours to suit your needs */
64ins {
65    background-color:#ff9;
66    color:#000;
67    text-decoration:none;
68}
69
70/* change colours to suit your needs */
71mark {
72    background-color:#ff9;
73    color:#000;
74    font-style:italic;
75    font-weight:bold;
76}
77
78del {
79    text-decoration: line-through;
80}
81
82abbr[title], dfn[title] {
83    border-bottom:1px dotted;
84    cursor:help;
85}
86
87table {
88    border-collapse:collapse;
89    border-spacing:0;
90}
91
92/* change border colour to suit your needs */
93hr {
94    display:block;
95    height:1px;
96    border:0;  
97    border-top:1px solid #cccccc;
98    margin:1em 0;
99    padding:0;
100}
101
102input, select {
103    vertical-align:middle;
104}
105/*END Reset CSS*/
106body{
107  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
108}
109header{
110  height: 60px;
111  width:100%;
112  position: fixed;
113  background-color: white;
114}
115header .container{
116  width: 100%;
117  position: relative;
118}
119header .container h1{
120  display: inline-block;
121  height: 30px;
122  width: 200px;
123  margin: 0%;
124  position: absolute;
125  top: 20px;
126  left: 15px;
127}
128header .container h1 img{
129  width: 100%;
130}
131header .container ul{
132  display: inline-block;
133  list-style: none;
134  margin: 0%;
135  padding: 0%;
136  float: right;
137}
138
139#key_visual{
140  width: 100%;
141  
142}
143 #key-visual img{
144   display: block;
145    width: 100%;
146    margin: 0 auto;
147}
148
149main{
150  width: 100%;
151  margin: 0 auto;
152}
153.information h2{
154  width: 100%;
155  padding:10px 12px;
156  margin: 0%;
157  background-color: #B99566;
158  color: white;
159  font-weight: normal;
160  font-size: inherit;
161}
162.information ul li::nth-child(even) {
163  background-color:#ff9;
164}
165.information .brown{
166  background-color: #F5F3F0;
167}
168.information p{
169  margin:0;
170
171}
172.information ul{
173  width:100%;
174  list-style: none;
175  padding-inline-start: 0%;
176}
177.information li{
178  height:37px;
179  line-height: 37px;
180  padding: 5px 10px;
181}
182

試したこと

font-sizeを変更したりしましたが、liの中に収まることはありませんでした。
ここにより詳細な情報を記載してください。

補足情報（FW/ツールのバージョンなど）

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

回答1件

ベストアンサー

li の高さを固定しているからじゃないでしょうか？

css
1.information li{
2  height:37px; /* ← 削除 */
3  line-height: 37px; /* ← 削除 */
4  line-height: 1.5; /* ← 追加 */
5  padding: 5px 10px;
6}

投稿2020/10/06 01:16

takopo

総合スコア484

Sakupi

2020/10/06 01:50

回答ありがとうございます！おっしゃる通りにすると、問題なくなりました！本当にありがとうございます！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

liタグの中身がliの中に収まらない

前提・実現したいこと

発生している問題・エラーメッセージ

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問