CSSでのpaddingの処理について

前提・実現したいこと

ProgateというサイトでHTML、CSSの勉強をしている者です。
ランディングページの作成をしています。

発生している問題・エラーメッセージ

mainのdivision(中央部分)で左右に100pxずつのpaddingを入れると、上手くテキストが左揃えになるのですが、左右にpaddingを与えないと、一行目が字下げのように少し右にズレてしまいます。CSSではどのような処理をしているのでしょうか？

該当のソースコード

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  </head>
8  <body>
9    <!-- ここからHTMLを書き始めてください -->
10    <div class="header">
11      <h1>Progate</h1>
12      <ul>
13        <li>プログラミングとは</li>
14        <li>学べるレッスン</li>
15        <li>お問い合わせ</li>
16      </ul>
17    </div>
18    <div class="middle">
19      <h1>HELLO WORLD<span>.</span></h1>
20      <h2>プログラミングの世界へようこそ</h2>
21    </div>
22  </body>
23</html>

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p,
4form, input, div {
5  margin: 0;                       /*←この部分を消すと直りましたが、影響が分かりません。*/
6  padding: 0;
7}
8
9li {
10  list-style: none;
11}
12
13/* ここからCSSを記述してください */
14body{
15  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
16}
17    .header{
18      height:90px;
19      background-color:#26d0c9;
20      color:#fff;
21    }
22        .header h1,li{
23          float:left;
24        }
25        .header h1{
26          font-size:36px;
27          margin:20px 40px;
28        }
29        .header li{
30          margin:33px 20px;
31        }
32    .middle{
33   }
34        .middle h1{
35          font-size:140px;
36        
37        }
38        .middle h2{
39          font-size:60px;
40        }
41        .middle span{
42          color:#ff4a4a;
43        }
44

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

azuapricot

2019/01/24 08:24

質問形式がものすごく見にくいので編集しなおしてください。画像も見れません。 mainのdivision(中央部分)で左右に100pxずつのpaddingを入れると、上手くテキストが左揃えになるのですが、左右にpaddingを与えないと、一行目が字下げのように少し右にズレてしまいます。CSSではどのような処理をしているのでしょうか？ ![![イメージ説明](0b2fe551f5ae73185c02f3326b2f4572.png)](4f043252a88c1e8764cccf42a8a7d4bb.png) ↑この部分は何も囲わずにそのまま記述するだけでいいはずです

azuapricot

2019/01/24 08:26

あと、CSSではどのような処理をしているのでしょうか？と聞いていますが、それを考えるためのCSSコーディングなのではないですか？恐らく提示されているCSSだけでは状況の再現も回答も不可能ですので、 CSSとhtmlの全体像を提示してください。