質問: ### 前提・実現したいこと ProgateというサイトでHTML、CSSの勉強をしている者です。 ランディングページの作成をしています。 ### 発生している問題・エラーメッセージ mainのdivision(中央部分)で左右に100pxずつのpaddingを入れると、上手くテキストが左揃えになるのですが、左右にpaddingを与えないと、一行目が字下げのように少し右にズレてしまいます。CSSではどのような処理をしているのでしょうか? ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7050399639be8245418dd79b8ce34e1f.png) ### 該当のソースコード ``` Progate Progate プログラミングとは 学べるレッスン お問い合わせ HELLO WORLD. プログラミングの世界へようこそ ``` ``` html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; /*←この部分を消すと直りましたが、影響が分かりません。*/ padding: 0; } li { list-style: none; } /* ここからCSSを記述してください */ body{ font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; } .header{ height:90px; background-color:#26d0c9; color:#fff; } .header h1,li{ float:left; } .header h1{ font-size:36px; margin:20px 40px; } .header li{ margin:33px 20px; } .middle{ } .middle h1{ font-size:140px; } .middle h2{ font-size:60px; } .middle span{ color:#ff4a4a; } ``` ### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: floatが解除されていないからです。 ``` .middle { clear: both; } ``` **動くサンプル:** 【floatを解除する4つの方法(clear:both;、overflow:hidden;、clearfix、height)】 デベロッパーツールで確認してみてください。 【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】 【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】 【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】 レイアウト全般の組み方の解説がされているのでお勧めです。 【よこ並びのCSS。】 【段組みのCSS。】