cssで要素の間隔を詰める方法

前提・実現したいこと

Progate(中級編)にて、ページの作成の練習をしています。
imgの間隔を詰めたいのですが、方法がわかりませんでした。
.lessons{
のところでpaddingかmarginを使えばできると思ったのですが、入力したところ、一列に並んでいたimgがバラバラになってしまいました。
それどころか、文字を入力した途端にバラバラになってしまうのですが、この解決方法と、間隔を詰める方法を知りたいです。
よろしくお願いします。

該当のソースコード

html CSS

ソースコード(html)

<div class="lesson-wrapper"> <div class="wrapper"> <h2>Learn Where to Get Started!</h2> </div> <div class="lessons"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png" alt="" /> <p>HTML & CSS</p> </div> <p class="lesson-text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div>

<div class="lessons">
  <div class="lesson-icon">
    <img src="https://prog-8.com/images/html/advanced/jQuery.png" alt="" />
    <p>jQuery</p>
  </div>
  <p class="lesson-text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
</div>  

<div class="lessons">
  <div class="lesson-icon">
    <img src="https://prog-8.com/images/html/advanced/ruby.png" alt="" />
    <p>Ruby</p>
  </div>
  <p class="lesson-text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
  
</div>

<div class="lessons">
  <div class="lesson-icon">
    <img src="https://prog-8.com/images/html/advanced/php.png" alt="" />
    <p>PHP</p>
  </div>
  <p class="lesson-text">
    HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。
  </p>  
  
</div>

</div>

ソースコード(CSS)
.lesson-wrapper{
height:580px;
text-align:center;
background-color:#f7f7f7;
}
.wrapper{
color:#5f5d60;
padding-top:80px;
margin-bottom:50px;
font-weight:normal;

}

.lessons{
float:left;
width:25%

}

.lesson-icon{

position:relative;
}

.lesson-icon p{
position: absolute;
top: 90px;
width: 100%;
color: white;
}
.lesson-text{
width:80%;
margin-top:15px;
color:#b3aeb5;
font-size:13px;
display:inline-block;
}

試したこと

padding margin

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

回答1件

ベストアンサー

imgの間隔とありますが.lessonsのcssの事を言われていますので、.lessons要素の左右の間隔と想定してお答えします。
現在の.lessonsの隙間はmargin,paddingで作られているものではなく width: 25%;(要素の横幅を全体の横幅の25%にする)の指定で作られているものです。
ですのでmargin,paddingでは変更できません。width: 20%などにすれば感覚は狭まりますが、float:leftが効いているので中央寄せにできず左によってしまい、この方法では解決できません。
解決策の一つとしては.lessonsをまとめて新たな要素で囲み、その要素のcssで調整する方法です。

html
1<div class="lessons-line"> <!--新たな要素で囲む-->
2	<div class="lessons">...</div>
3	<div class="lessons">...</div>
4	<div class="lessons">...</div>
5	<div class="lessons">...</div>
6</div>
7
8<!--スタイルを追加-->
9<style>
10.lessons-line{
11	margin-left: auto;
12	margin-right: auto;
13	max-width: 800px;/*数値は自由*/
14}
15</style>