ＨＴＭＬ メインのレイアウトについて

Question

現在ＰＲＯＧＡＴＥにてメインのレイアウトをやっておりますが
contents-itemと画面端の空白の開け方が分からず困っております。左の画像が自分のコンテンツ　右が正解になります。どなたかご指導いただけると助かります。
コードは下記の通りになります。

【ＨＴＭＬ】
<div class="contents">
        <h3 class="section-title">学べるレッスン</h3>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
          <p>PHP</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
          <p>Ruby</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
          <p>Swift</p>
        </div>
      </div>
  </body>
</html>

【CSS】
body {
    font-family: "Avenir Next","Hiragino Kaku Gothic ProN W3",sans-serif;
}

.header {
  font-family: "Avenir Next","Hiragino Kaku Gothic ProN W3",sans-serif;
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}
.header-logo {
  padding: 20px 40px;
  float: left;
  font-size: 36px;
}
li {
  float: left;
  padding: 33px 20px;
  List-Style: none;
}
.main {
  padding: 100px 80px;
}
.copy-container h1 {
  font-size: 140px;
  
}
.copy-container h2 {
  font-size: 60px;
}
.copy-container span {
  color: #ff4a4a;
}
.contents {
  height: 500px;
 
  margin-top: 100px;
  
}
.section-title {
  border-bottom: 2px solid #dee7ec;
  font-size: 28px;
  padding-bottom: 15px;
   margin-bottom: 50px;
   margin:60px;
  
}

.contents-item

  float: left;
  margin-right:40px;

}
.contents-item p {
  font-size: 24px;
  margin-top: 30px;

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[yoshinavi]

プロゲートに聞いたり、ヒント等は貰えないのでしょうか？

[3AnL49MTU6OiOj3]

申し訳ありません。修正致しました。残念ながらＰＲＯＧＡＴＥでの質問はできない形になっております。

[yoshinavi]

PROGATEから、「使用タグの指定」等の作成条件はあったりするのでしょうか？

[yoshinavi]

先ずは、CSSのコードが一部コードブロックから出ているので、HTMLとCSSは分けて、それぞれをコードブロックにした方が良いです。

Answer 1

現時点で出されている情報からの推測になりますが、contents-itemと画面の端との間をあけたいのであれば、contents-itemにmarginを指定してあげれば良いのではないでしょうか。
例えば、左側の画面の端とcontents-itemとの間に余白が欲しければmargin-left:空けたい間隔px等です。
marginとは：https://wa3.i-3-i.info/word16137.html

Comments

[3AnL49MTU6OiOj3]

ご回答ありがとうございます。marginで画面端の空白を開けつつ　contents-item間の空白を開けることは可能でしょうか？
contents-item間の空白も同じくmarginになるのでしょうか？

[yukapome789]

可能ですが、恐らくcontents-itemにmargin-leftを指定したら、全てのcontents-itemの左側に空白を取れますよ。contents-itemにmargin-rightを指定したままだと、被るところが2重で空白取れちゃうんで消したほうが良いと思いますが。

[3AnL49MTU6OiOj3]

ご回答ありがとうございます。margin-left指定したのですが、変化はありませんでした泣現在のＣＳＳは
.contents-item {
float: Left;
margin-left;
}
になります。contents-itemの空白は取れない状態です。

[yukapome789]

一部のソースしか載せてないと思うんで全部のソース出してもらっていいですか。あとインデントちゃんとして、ソースを```で囲って下さい。（読みづらすぎるので

[3AnL49MTU6OiOj3]

すいません。何分初心者なもので、以下がコード一覧になります。
インデントとゆうどういった所作なのでしょうか。質問ばかりで申しわけありません。
body {
font-family: "Avenir Next","Hiragino Kaku Gothic ProN W3",sans-serif;
}

.header {
font-family: "Avenir Next","Hiragino Kaku Gothic ProN W3",sans-serif;
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
padding: 20px 40px;
float: left;
font-size: 36px;
}
li {
float: left;
padding: 33px 20px;
List-Style: none;
}
.main {
padding: 100px 80px;
}
.copy-container h1 {
font-size: 140px;

}
.copy-container h2 {
font-size: 60px;
}
.copy-container span {
color: #ff4a4a;
}
.contents {
height: 500px;
margin-top: 100px;

}
.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
margin:60px;

}
.contents-item {
float: Left;
margin:40px;
margin-left;
}
.contents-item p {
font-size: 24px;
margin-top: 30px;
}

[yukapome789]

本文にインデント入れたコードを載せていただきありがとうございます（ただ下の方のソースがはみ出てますよ）。本件は解決したのでしょうか？もしまだなら、先日まで貼ってあった画像と完成後の画像が消えてしまってるので貼って下さい。あと、別の質問で拝見したのですが、プロゲートの推奨ブラウザはGoogleChromeなので、Chrome使った方が余計なこと悩まずに済みますよ。https://prog-8.com/help