float leftとfloat rightでul間に隙間を作りたい。

前提・実現したいこと

ドットインストールのcssレイアウト入門#15を学習中です。
float leftとfloat rightで、1枚目の画像のようにul間に隙間を作りたいのですが、2枚目の画像の通り隙間ができません。

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

1枚目の画像のドットインストール動画では、隙間ができている。
一方、2枚目の自身で作成した結果、隙間ができない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>CSS Layout Practice</title>
6  <link rel="stylesheet" href="normalize.css">
7  <link rel="stylesheet" href="styles.css"> </head>
8<body>
9  <header>
10    <div class="container">
11      header
12    </div>
13  </header>
14  <main>
15    <div class="container">
16      <ul id="lessons">
17        <li>
18          <div class="lesson_img">
19            <img src="html.png" width="50" height="50">
20          </div>
21          <div class="lesson_Info">
22            <h2>HTML入門</h2>
23            <p>Intro to HTML. Intro to HTML. Intro to HTML. Intro to HTML. Intro to HTML. Intro to HTML. </p>
24          </div>
25        </li>
26      </ul>
27
28  </main>
29  <footer>
30    <div class="container">
31      footer
32    </div>
33  </footer>
34</body>
35</html>

css
1 .container {
2   width: 500px;
3   margin: 0 auto;
4 }
5
6 header {
7   background: tomato;
8 }
9
10 main {
11   background: skyblue;
12   padding: 15px 0;
13 }
14
15 ul#lessons {
16   margin: 0;
17   padding: 0;
18   list-style-type: none;
19 }
20
21 ul#lessons h2, ul#lessons p {
22   margin: 0;
23   padding: 0;
24   font-size: 14px;
25 }
26 ul#lessons .lesson_img {
27  float: left;
28  width: 50px;
29 }
30 ul#lessons .lesson_info {
31  float: right;
32  width: 440px;
33 }
34 ul#lessons li {
35  overflow: hidden;
36 }
37
38 footer {
39   clear: both;
40   background: slategray;
41 }

試したこと

見直しましたが、原因が特定できませんでした。

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

cloud9を使用しています。

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

回答2件

ベストアンサー

HTML
1<!-- 
2<div class="lesson_Info">
3                   ↓クラス名が違います   -->
4<div class="lesson_info">

投稿2018/12/20 13:00

kei344

総合スコア69400

hisarin

2018/12/20 13:23

ありがとうございました。助かりました。

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

画像と文字の間の話でしょうか？

.containerが500pxで.lesson_imgが50px、.lesson_infoが440pxなので
理論上10px程度の隙間ができるはずです

とりあえずスタイルシートに

CSS
1*{
2margin:0px;
3padding:0px;
4}

を指定してみるところからでしょうかね

投稿2018/12/20 11:56

yambejp

総合スコア114784

hisarin

2018/12/20 13:24

ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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