progate html での横並びの位置不具合

###前提・実現したいこと

progateの実践問題で正解にならないので質問です。
html下部のコース一覧のところで .course-itemのクラス３つをinline-blockで横並びにしているのですが、
cssの #course-item-list で 'width:100%;' のセミコロンを外した状態で正しい位置に来ているようです。
ただ 'width:100%;' 自体を消してしまうと横表示すらできなくなってしまいます。
なにか解決策はあるのでしょうか？
初心者で可読性のないコードですがよろしくお願いします。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <!-- head内に変更を加えないでください-->
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <title>0からWEBサイトを作ってみよう</title>
8    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
9    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
10    <link rel="stylesheet" href="stylesheet.css">
11  </head>
12  <body>
13    <!-- ここから書き始めてください -->
14    <!-- ヘッダー部分 -->
15    <header>
16      <div class="container">
17        <div id="header-left">
18          <h3 id='header-logo'>Progate School</h3>
19        </div>
20        <div id="header-right">
21          <ul id="header-right-list">
22            <li>学習言語</li>
23            <li>特徴</li>
24            <li>料金</li>
25            <li>コラム</li>
26            <li>お問い合わせ</li>
27          </ul>
28        </div>
29      </div>
30    </header>
31    
32    <!-- トップ部分 -->
33    <div id="top-wrapper">
34      <div id="top-message">
35        <h1>プログラミングは人生を変える</h1>
36        <p>プログラミングを学んで、新しい自分を見つけよう。</p>
37        <a id="top-btn" href="#">もっと詳しく</a>
38      </div>
39    </div>
40    
41    <!-- 言語一覧 -->
42    <div id="lang-wrapper">
43      <div class="container">
44        <h1 id="lang-title">学習する言語</h1>
45        <div id="lessons">
46          <div class="lesson">
47            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png">
48            <h2>HTML & CSS</h2>
49            <p>Webページの<br />見た目をつくる言語</p>
50          </div>
51          <div class="lesson">
52            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png">
53            <h2>jQuery</h2>
54            <p>効果やアニメーションを実装できる<br />Javascriptライブラリ</p>
55          </div>
56          <div class="lesson">
57            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png">
58            <h2>Javascript</h2>
59            <p>動的なウェブサイト構築に用いる<br />プログラミング言語</p>
60          </div>
61          <div class="lesson">
62            <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png">
63            <h2>Git</h2>
64            <p>ソースコードのバージョン管理、<br />共同開発を可能にするツール</p>
65          </div>
66        </div>
67      </div>
68    </div>
69    
70    <!-- 特徴 -->
71    <div id="attr-wrapper">
72      <h1>特徴</h1>
73      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/mac_code.png">
74    </div>
75      <div class="container">
76        <div id="attr-items">
77          <div class="item">
78            <h2>① ProgateでWEB開発の基礎知識を身につけよう</h2>
79            <p>Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ２周することによって知識を定着させます。</p>
80          </div>
81          <div class="item">
82            <h2>② Progateの道場で知識を習得しよう</h2>
83            <p>Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。</p>
84          </div>
85          <div class="item">
86            <h2>③ 実際にプロダクトを作ってみよう</h2>
87            <p>Progateで実践的な力を身につけたら自分で１つのプロダクトを作ってみましょう。自分で１から作ってみると、意外に理解できていないことに気づくと思います。
88                バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。</p>
89          </div>
90          <div class="item">
91            <h2>④ エンジニアインターンを体験しよう</h2>
92            <p>実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。</p>
93          </div>
94          <div class="clear"></div>
95        </div>
96      </div>
97      
98      <!-- コース一覧 -->
99      <div id="course-wrapper">
100        <div class="container">
101          <div id="course-header">
102            <h1>コースを選ぶ</h1>
103          </div>
104          <div id="course-item-list">
105            <!-- 1つ目 -->
106            <div class="course-item week2">
107              <h2 class="course-title">短期集中2週間コース</h2>
108              <h1 class="course-price">3万円</h1>
109              <ul>
110                <li class="course-elem">期間:2週間</li>
111                <li class="course-elem">チャットでの質問: ○ </li>
112                <li class="course-elem">オフィスでの質問: ○ </li>
113              </ul>
114              <a href="#" class="btn-app">申し込む</a>
115              <div class="clear"></div>
116            </div>
117            <!-- 2つ目 -->
118            <div class="course-item month1">
119              <h2 class="course-title"> 通常1ヶ月コース </h2>
120              <h1 class="course-price">5万円</h1>
121              <ul>
122                <li class="course-elem">期間:1ヶ月</li>
123                <li class="course-elem">チャットでの質問: ○ </li>
124                <li class="course-elem">オフィスでの質問: ○ </li>
125              </ul>
126              <a href="#" class="btn-app">申し込む</a>
127            </div>
128            <!-- 3つ目 -->
129            <div class="course-item month2">
130              <h2 class="course-title">土日開発2ヵ月コース</h2>
131              <h1 class="course-price">8万円</h1>
132              <ul>
133                <li class="course-elem">期間:2ヵ月</li>
134                <li class="course-elem">チャットでの質問: ○ </li>
135                <li class="course-elem">オフィスでの質問: ○ </li>
136              </ul>
137              <a href="#" class="btn-app">申し込む</a>
138            </div>
139          </div>
140        </div>
141        <div class="clear"></div>
142      </div>
143  </body>
144</html>

css
1/*-------  ここから共通のCSS  --------*/
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p,
5form, input, div {
6  margin: 0;
7  padding: 0;
8}
9
10li {
11  list-style: none;
12}
13
14a {
15  text-decoration: none;
16}
17
18body {
19  -webkit-font-smoothing: antialiased;
20  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
21}
22
23/*-------  ここまで共通のCSS  --------*/
24
25.container{
26  width: 1170px;
27  margin: 0 auto;
28  padding: 0 15px;
29}
30
31.clear{
32  clear: left;
33}
34
35/* ヘッダー部分 */
36header{
37  position: fixed;
38  text-align: center;
39  background-color: white;
40  width: 100%;
41  height: 50px;
42  border: 1px solid #eee;
43  z-index: 100;
44}
45
46#header-left{
47  float: left;
48}
49
50#header-logo{
51  font-family: 'Dosis', sans-serif;
52  line-height: 50px;
53  font-size: 22px;
54  color: #777;
55  cursor: pointer;
56}
57
58#header-right{
59  float: right;
60  line-height: 50px;
61}
62
63#header-right-list li{
64  float: left;
65  padding-left: 20px;
66  color: #323a45;
67  font-size: 13px;
68  font-weight: bold;
69  cursor: pointer;
70}
71
72#header-logo:hover, #header-right-list li:hover{
73  color: #0dc0c0;
74}
75
76/* トップ部分 */
77#top-wrapper{
78  background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/top.jpg);
79  background-size: cover;
80  text-align: center;
81}
82
83#top-message{
84  color: white;
85  width: 100%;
86  padding: 220px 0px 160px 0px;
87  background-color: rgba(0,0,0,0.6);
88}
89
90#top-message h1{
91  font-size: 48px;
92  font-weight: normal;
93}
94
95#top-message p{
96  font-size: 18px;
97  color: rgba(255,255,255,0.8);
98  margin: 30px 0 40px 0;
99}
100
101#top-btn{
102  color: rgba(255,255,255,0.8);
103  font-size: 17px;
104  font-weight: bold;
105  padding: 10px 20px;
106  margin-bottom: 20px;
107  border: 1px solid rgba(250,250,250,0.15);
108  background-color: rgba(250,250,250,0.06);
109}
110
111/* 言語一覧 */
112#lang-wrapper{
113  text-align: center;
114}
115
116#lang-title{
117  color: #555;
118  font-size: 32px;
119  font-weight: normal;
120  margin: 80px 0 10px 0;
121}
122
123#lessons{
124  height: 500px;
125  margin: 0 auto 80px auto;
126  width: 60%;
127}
128
129.lesson{
130  float: left;
131  box-sizing: border-box;
132  width: 50%;
133}
134
135.lesson img{
136  margin-top: 40px;
137}
138
139.lesson h2{
140  font-size: 18px;
141  font-weight: normal;
142  margin: 20px 0 10px 0;
143}
144
145.lesson p{
146  font-size: 14px;
147  color: #888;
148}
149
150/* 特徴部分 */
151#attr-wrapper{
152  text-align: center;
153  height: 376px;
154  background-color: #f4f4f4;
155}
156
157#attr-wrapper h1{
158  font-weight: normal;
159  color: #555;
160  padding: 80px 0 10px 0;
161}
162
163#attr-items{
164  padding: 60px 0;
165}
166
167.item{
168  text-align: left;
169  float: left;
170  width: 40%;
171  padding: 70px 5% 0 5%;
172}
173
174.item h2{
175  color: #555;
176  font-weight: normal;
177  font-size: 18px;
178}
179
180.item p{
181  color: #888;
182  font-size: 14px;
183  padding-top: 10px;
184}
185
186/* コース一覧 */
187#course-wrapper{
188  text-align: center;
189  background-color: #f4f4f4;
190  padding-bottom: 100px;
191}
192
193#course-header h1{
194  color: #555;
195  padding: 80px 0 20px 0;
196  font-weight: normal;
197}
198
199#course-item-list{
200  color: #888;
201  width: 100%
202  padding: 0 14px;
203}
204
205.course-item{
206  display: inline-block;
207  vertical-align: top;
208  width: 28%;
209  padding: 15px;
210  margin: 20px 14px 0;
211  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
212  background-color: white;
213}
214
215.course-item h2{
216  color: white;
217  padding: 30px 0;
218  font-size: 24px;
219  background-color: #323a45;
220  font-weight: normal;
221}
222
223.course-item h1{
224  font-size: 28px;
225  padding: 30px 0;
226  margin-bottom: 20px;
227  background-color: #f0f0f0;
228}
229
230.course-item li{
231  font-size: 16px;
232  padding: 25px 0;
233  margin: 0 30px;
234  border-bottom: 1px solid #f0f0f0;
235}
236
237.month1 h2{
238  background-color: #0dc0c0;
239}
240
241.btn-app{
242  color: rgba(255,255,255,0.7);
243  display: inline-block;
244  font-size: 18px;
245  font-weight: bold;
246  padding: 10px 20px;
247  margin: 40px 0;
248  background-color: #323a45;
249}
250
251.btn-app:hover{
252  color: rgba(255,255,255,1.0);
253}

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

回答2件

ベストアンサー

コードを検証させて頂いたところ、ちょっと面白い現象だと思いました。私の知識では何とも言えませんが、ブラウザの解釈による現象の一つだと思います

通常であれば、width:100%;の最後のセミコロンが無い時点で反映せずブラウザによってwidth:auto;と解釈されるはずですが、空白はダメですが、文字が入る事で（何でも良いみたいで、ｗの1文字でも）親のwidthを継承してるみたいです。

提示されてない「course-item week2」「course-item month1」「course-item month2」のスタイルによるので不明ですが、width:100%;では「パディング」の分ズレが生じます。<div class="container">、<div id="course-item-list">に背景色をそれぞれつけると確認出来ると思いますので試して見て下さい。

投稿2017/08/13 02:59

yoshinavi

総合スコア3523

セミコロンが抜けているなら補えばいいのではないのでしょうか？
ちょっと質問の意図が分かりません。

CSS
1#course-item-list{
2  color: #888;
3  width: 100%; /* fix */
4}

投稿2017/08/07 05:21

x_x

総合スコア13749

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

progate html での横並びの位置不具合

関連した質問