float: left;を使用した場合の余白エラー

こんにちは！

デザインカンプからWEB制作を練習しています。

【質問内容】
以下のコードでmainタグ内のmain-pic2クラスとcontentクラスの間に
60pxの余白を作りたいです。

【環境】
・Windows10
・Visual Studio Code使用
・デザインカンプ↓

【試してみたこと】
今回、contentはfloatで画像の横に置いていますが、
padding-rightをいれても反映されません。
そもそも全体がWidth：1000pxになっているようなので
containerクラスで幅を揃えてみていますが、うまくいきません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=, initial-scale=1.0">
7    <title>What is "Coding basics"?</title>
8    <link rel="stylesheet" href="stylesheet.css">
9</head>
10<body>
11    <header>
12        <div class="container">
13            <h2>LOGO</h2>
14            <!--リストの回り込み未解除-->
15            <ul>
16                <li>Home</li>
17                <li>About</li>
18                <li>Contact</li>
19            </ul>
20        </div>    
21
22    </header>
23    <main>
24        <div class="main-pic">
25            <img src="fv.png" alt="">
26        </div>
27        <div class="container">
28
29            <div class="main-title">
30                <h2>Feature</h2>
31
32            </div>
33            
34            <img src="sample.png" width="480px" height="329px" class="main-pic2" alt="">
35            <div class="content">
36                <h2>What is "Coding basics"?</h2>
37                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
38                    sed do eiusmod tempor incididunt ut labore et dolore 
39                    magna aliqua. Ut enim ad minim veniam, quis nostrud 
40                    exercitation ullamco laboris nisi ut aliquip ex ea. 
41                    commodo consequat. Duis aute irure dolor in 
42                    reprehenderit in voluptate velit esse cillum dolore eu.
43                </p>
44                <a href="#" class="btn">Read More</a>
45            </div>
46        </div>
47        <div class="clear"></div>
48
49    </main>
50　　<footer>
51        <h2>LOGO</h2>
52        <p>© 2020 LOGO All rights reserved.</p>
53
54    </footer>
55    
56</body>

CSS
1@charset "UTF-8";
2body {
3
4    font-family: Arial, Helvetica, sans-serif;
5    width: 1366px;
6    height: 1327px;
7
8}
9
10header {
11    background-color: #EFA358;
12    height: 80px;
13    
14    color: #FFFFFF;
15}
16
17.container {
18    width: 100%;
19    max-width: 1000px;
20    margin-right: auto;
21    margin-left: auto;
22}
23
24header h2 {
25    font-size: 28px;    
26    float: left;
27}
28
29li {
30    list-style: none;
31    font-size: 20px;
32    float: right;
33    padding-right:  22px;
34    padding-top: 31px;
35}
36
37.main-title {
38    text-align: center;
39    font-size: 32px;
40    color: #555555;
41    
42}
43
44.main-pic2 {
45    float: left;
46}
47
48.content {
49    color: #555555;
50}
51
52.btn {
53    font-size: 16px;
54    background-color: #EFA358;
55    color: #FFFFFF;
56    border-radius: 10px;
57    display: inline-block;
58    width: 197px;
59    text-align: center;
60    padding: 15px 0;
61
62}
63
64footer {
65    text-align: center;
66    height: 100px;
67    background-color: #EFA358;
68    color: #FFFFFF;
69}
70
71footer h2 {
72    font-size: 24px;
73}
74
75footer p {
76    font-size: 12px;
77}
78
79.clear {
80    clear: left;
81}

デザインカンプ提供者からは、コードの模範解答など公開されておらず
技術に関する質問NGとのことでしたので、こちらに質問させていただきました。

どうぞご教授お願い致します。

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

回答1件

ベストアンサー

ご提示のコードを試してみましたが、

css
1.main-pic2 {
2	float: left;
3	padding-right: 60px;
4}

で余白ができるようでした。

投稿2021/12/22 02:00

Lhankor_Mhy

総合スコア36158

hitomi2276

2021/12/22 02:21

早速のご回答ありがとうございました！自分のコーディングでもできました！ちなみに、もし可能でしたらもう1点質問よろしいでしょうか？ headerタグ内のliタグについて見本ではHomeが左側にきているのですが、私のコーディングではHomeが右側に来てしまっています。回り込み解除などで検索してみましたが、どこに何を置けばいいのかわかりません。。。どうぞよろしくお願いいたします。