HTML勉強中です、文字が左詰めになりません

HTMLの学習をしております。
main部に<div class="m-title">a</div>を追加しましたが、
画面表示を見ると、左詰めになりませんでした。
原因について教えていただきたいです。
また、今後同様の現象を起こさないようにするにはどういう点に注意してコーディングすればよいでしょうか。

HTML
1<!DOCTYPE html>
2<head>
3    <meta charset="utf-8">
4    <title>
5        テストサイト
6    </title>
7    <link rel="stylesheet" href="css/hk-stylesheet.css">
8</head>
9<body>
10    <div class="header">
11        <div class="h-main">TestSite</div>
12        <div class="h-menu">
13            <ul>
14                <li>
15                    <a href="">about me</a>
16                </li>
17                <li>
18                    <a href="" target="_blank">blog</a>
19                </li>
20                <li>
21                    <a href="">contact me</a>
22                </li>
23                <li>
24                    <a href="">links</a>
25                </li>
26            </ul>
27        </div>
28    </div>    
29    <div class="main">
30        <div class="m-title">a</div>
31    </div>
32    <div class="footer">
33        <div class="f-main">TestSite</div>
34        <div class="f-menu">
35            <ul>
36                <li>COOPERATE</li>
37                <li>MOBILITY</li>
38                <li>SUSTAINABLITY</li>
39                <li>RECRUIT</li>
40            </ul>
41        </div>
42    </div>
43</body>

CSS
1/* ヘッダー項目 共通 */
2.header{
3    height: 100px;
4    /* float: left; */
5    background-color: #ffd700;
6    font-family: impact;
7}
8
9/* ヘッダー項目 タイトル */
10.h-main, .f-main{
11    font-size: 50px;
12    float: left;
13    padding:20px 80px 20px 10px;
14}
15
16/* ヘッダー項目 メニュ */
17.h-menu li{
18    font-size: 35px;
19    list-style: none;
20    float: left;
21    padding-left:30px;
22    padding-right: 30px;
23    padding-top: 30px;
24}
25
26/* ヘッダー項目 メニューリンク */
27.h-menu a{
28    text-decoration: none;
29    color: #000000;
30}
31
32/* メイン項目 共通 */
33.main{
34    height: 600px;
35    background-color: #dcdcdc;
36}
37
38/* フッター項目 共通 */
39.footer{
40    height: 150px;
41    background-color: #fffacd;
42    font-family: impact;
43}
44
45/* フッター項目 メニュー */
46.f-menu{
47    float: right;
48}
49/* フッター項目 メニューリスト */
50.f-menu li{
51    font-size: 20px;
52    list-style: none;
53    margin-bottom: 10px;
54    padding-right: 10px;
55}

coco_bauer

2020/04/24 09:38

m-titleクラスに関する記述がCSSの中に見当たりません。質問に描いてあるCSSは、質問のHTMLとは無関係なものなのではないですか？

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

回答1件

ベストアンサー

floatの回り込みに対するclear: both;が抜けてしまっていることが原因と考えます。
(floatを指定した要素の横幅の位置に.m-titleが引っかかって文字の開始位置がズレてしまっているように見えます。)

試しに以下のように<div>を追加してみてください。

HTML
1    <div class="header">
2        <div class="h-main">TestSite</div>
3        <div class="h-menu">
4            ...
5        </div>
6    </div>
7    
8    <div style="clear: both;"></div><!-- こちらを追加してみてください -->
9    
10    <div class="main">
11        <div class="m-title">a</div>
12    </div>