CSSでfloat:leftがうまく使えない

Progateにて HTML%CSS道場コース中級編中級編を復習しよう 3.レッスン一覧部分を作ろう
という課題をしているのですが、
要素を横並びにする事がうまくいきません。
4つの要素があり、それを横ならびにするだけなのでfloat: leftを使えばできるはず、
と思い記述してみましたが横並びにならずに苦戦しています。
答えがあるので見て書き直せばいいのですが、なぜ駄目なのかを理解したいです。

icon-container　の中にある4つの icon html/jquery/ruby/php を横並びにしたいので
icon に float: left;　を記述しています。
float:leftを記述することで、次のicon要素が右に来る…と思っていたのですが駄目でした。
これで横並びにならない理由を教えて下さい。

とりあえず動きを覚えるという所なので、コーディングが駄目駄目なのはご勘弁ください。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <header>
13    <div class="header-container">
14      <div class="header-title">
15        <img class="progate-logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
16      </div>
17      <div class="header-login">
18        <p>ログイン</p>
19      </div>
20    </div>
21  </header>
22  <div class="main">
23    <div class="main-container">
24      <div class="main-description">
25        <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
26        <p>Progateはオンラインプログラミング学習サービスです。</p>
27        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう</p>
28      </div>
29      <div class="signup-container">
30        <div class="btn account">
31          <p>新規登録はこちら</p>
32        </div>
33        <p><span>or</span></p>
34        <div class="btn facebook">
35          <p><i class="fa fa-facebook"></i>Facebookで登録</p>
36        </div>
37        <div class="btn twitter">
38          <p><i class="fa fa-twitter"></i>Twitterで登録</p>
39        </div>
40      </div>
41    </div>
42    <div class="content-container">
43      <h2>Learn where to Get Started!</h2>
44      <div class="icon-container">
45        <div class="icon html">
46          <img src="https://prog-8.com/images/html/advanced/html.png">
47          <h3>HTML & CSS</h3>
48          <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
49        </div>
50        <div class="icon jquery">
51          <img src="https://prog-8.com/images/html/advanced/jQuery.png">
52          <h3>jQuery</h3>
53          <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
54        </div>
55        <div class="icon ruby">
56          <img src="https://prog-8.com/images/html/advanced/ruby.png">
57          <h3>Ruby</h3>
58          <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
59        </div>
60        <div class="icon php">
61          <img src="https://prog-8.com/images/html/advanced/php.png">
62          <h3>PHP</h3>
63          <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
64        </div>
65      </div>
66    </div>
67  </div>
68  <footer>
69  </footer>
70</body>
71</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22header{
23  position: fixed;
24  width: 100%;
25  height: 65px;
26  background-color: rgba(34,49,52,0.9);
27  z-index: 10;
28}
29.header-container{
30  width: 1170px;
31  margin-left: auto;
32  margin-right: auto;
33}
34.progate-logo{
35  width: 124px;
36  float: left;
37  margin-top: 20px;
38}
39.header-login{
40  height: 65px;
41  float: right;
42  color: white;
43  background-color: rgba(255,255,255,0.3);
44}
45.header-login p{
46  margin: 20px 25px;
47}
48
49.header-login:hover{
50  transition: 0.5s;
51  background-color: rgba(255,255,255,0.5);
52  cursor: pointer;
53}
54.main-container{
55  background-image: url(https://prog-8.com/images/html/advanced/top.png);
56  background-size: cover;
57}
58.main-description{
59  text-align: center;
60  color: white;
61  opacity: 0.7;
62  margin-bottom: 30px;
63}
64.main-description h1{
65  font-size: 45px;
66  letter-spacing: 5px;
67  margin: 0 auto;
68  padding-top: 180px;
69}
70.signup-container{
71  text-align: center;
72  padding-bottom: 100px;
73  color: white;
74}
75.signup-container span{
76  opacity:0.8;
77}
78.btn{
79  display: inline-block;
80  padding: 8px 24px;
81  margin-top: 15px;
82  border-radius: 4px;
83  opacity:0.8;
84}
85.btn:hover{
86  opacity: 1;
87}
88.account{
89  background-color: #239b76;
90  margin-bottom: 15px;
91}
92.facebook{
93  background-color: #3b5998;
94  margin-right:10px;
95}
96.twitter{
97  background-color: #55acee;
98}
99.fa{
100  margin-right: 5px;
101}
102
103.content-container{
104  width: 1170px;
105  height: 580px;
106  margin-left: auto;
107  margin-right: auto;
108}
109
110.content-container h2{
111  margin: 80px 50px 0px 0px;
112  text-align: center;
113  font-weight: normal;
114  
115}
116.icon-container{
117  width: 25%;
118  text-align: center;
119  display: inline-block;
120}
121.icon {
122  position: relative;
123  width: 100%;
124  float: left;
125}
126.html{
127}
128.icon h3{
129  position: absolute;
130  top: 90px;
131  left: 0;
132  right: 0;
133  margin: auto;
134  color: white;
135  font-weight: normal;
136}
137.icon p{
138  font-size: 13px;
139  color: #b3aeb5;
140}

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

回答2件

css
1.icon-container{
2  width: 25%;
3  text-align: center;
4  display: inline-block;
5}
6.icon {
7  position: relative;
8  width: 100%;　/*←4つ横に並べるのに全部幅100%だったらそりゃ並ばないよね*/
9  float: left;
10}

以下蛇足

ちょっと気になったところ

css
1.html{ /*これは何をしたくて書いたのか。現状何の指定もされていない。*/
2}

後、学習上使う事を余儀なくされてるなら仕方ないですが、floatプロパティで横並べにするのは相当古い
技術です。現在ではフレックスボックスレイアウトを使うのが良いです。

css
1.icon-container{
2  width: 100%;
3  text-align: center;
4  display: flex;
5}
6.icon {
7  position: relative;
8  width: 25%;
9}

投稿2021/06/18 01:24

K_3578

総合スコア1282

K_3578

2021/06/18 01:42

※独り言 4年前にCやってた人が今更ProgateでHTML&CSS？と思ったけど、組み込みだとこの辺も一切やらないのかな、私にはわからん

pipimaru

2021/06/18 02:18

学習上float,display両方とも出てきましたが、まだ使い分けられてない状態です仕事を辞めたのでWeb開発系の転職目指して1から勉強してます！仕事はC言語のみの制御(製品の特性上、Cとアセンブラのみ)だったため、C以外は全くです…

K_3578

2021/06/18 02:22 編集

>仕事はC言語のみの制御成程、私は組み込み系はやってないので知りませんでした、不快に思われたなら申し訳ありません。 floatに関しては詳しいことは言いませんが、基本的に不具合を多く生み出すのでProgateの仕様上、使わないといけないのならば使っても良いですが、基本的にはフレックスボックスを使うようにしてください。 (気になる場合はfloatについてググればどれだけ使いづらい存在か分かると思います)

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

ベストアンサー

widthの指定が逆ではないでしょうか？

.icon-container{
  width: 100%; /*ここを修正*/
  text-align: center;
  display: inline-block;
}
.icon {
  position: relative;
  width: 25%; /*ここを修正*/
  float: left;
}

投稿2021/06/18 01:10