全てのヘッダーのタイトルを同じ位置に持っていきたい

Question

全てのヘッダーのタイトルを同じ位置に持っていきたいです。
なぜこのようになってしまうのでしょうか？top.htmlの"WEB SITE"の文字の位置と同じにしたいのですが....

Comments

[dit.]

profile.htmlにprofile.cssは読み込まれてますか？

[退会済みユーザー]

はい、読み込まれています

Answer 1

<header class="clearfix">
  <h1 class="title">WEB SITE</h1>
</header>

だけにして確認しました。

top.htmlと同じにしたい場合
profile.cssの

* {
    margin: 0;
    padding: 0;
}

header {
    height: 100px;
    background-color: pink;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

が不要ですし、profile.htmlに合わせるとしたら
top.cssに

* {
    margin: 0;
    padding: 0;
}

header {
    height: 100px;
    background-color: pink;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

を追加すればいいのではないですか。
.titleの記述が同じでもそれ以外の記述で結果は変わります。

ulの直下にdivがあるなど気になるところもたくさんあります。
一度見直していただいた方がいいかと思います。

共通で読み込ませるcssと各ページ独自のcssを作ることも一つの手だと思います。

Comments

[退会済みユーザー]

ありがとうございます。profile.cssの２つを削ると、ヘッダーにつけた背景色や文字などもなくなってしまうのですが、なぜ不要だとお考えなのでしょうか？

[dit.]

色等が消えるのはわかっています。
top.htmlに合わせたいということだったので、提示されたtop.cssに入っていない部分を削除しただけです。
headerの中にh1が入っただけのソース（回答の一番上に記載したもの）で、提示のcssを２種類試した結果、その部分の差異だと考えたからです。
ディベロッパーツールを使ってどの要素にどのcssが効いているか確認してください。
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

[dit.]

10/10 16:03の編集でソースコードを含むほとんどの質問内容が削除されていますが、何か問題があったのでしょうか。