display:flex;で横並びになりません。。。

前提・実現したいこと

display:flex;でフッターのロゴと文字を横並びにしたいのですが、
縦並びのままです。
何が原因でしょうか。
よろしくお願いします。

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

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="first.css">
    <link rel="stylesheet" href="query-first.css">
    <link rel="stylesheet" href="_reset.css">
    <title>test_First</title>
      
</head>
<body>
<header>
</header>
<main>
</main>
　　<footer>
        
            <img src="#" alt="ロゴ">
            <p>© All Rights Reserved.</p>
            
    </footer>
</body>
</html>

footer{
    width: 1920px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

試したこと

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

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

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

Daregada

2021/02/06 03:56

質問の「該当のソースコード」のうち、「footer { ... }」の部分は、実際にはどのファイルに書いてあるのでしょうか? A. HTMLファイルの末尾に書いてある(「該当のソースコード」の内容は、1個のファイルの内容そのままである) B. HTMLファイルとは別のファイルに記述している(「該当のソースコード」の内容は、複数のファイルの内容をまとめたものである) あなた以外は、AとBどちらなのか区別が付きません。Bの場合は、CSSファイルのファイル名や置き場所(HTMLファイルと同じ場所か、サブフォルダー以下に置いているか)も質問文に記載してください。

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

回答2件

ベストアンサー

head内のCSSファイルの読み込みの順番に原因があるのではないでしょうか。

css
1
2<link rel="stylesheet" href="_reset.css">
3

リセットCSSのような名前のものを最後に読み込みされておりますので、CSSがリセットされている可能性がございます。
上記のコードをmetaタグの真下まで移動されるのはいかがでしょうか。

解決しない場合、下記のファイルに記載されていること開示されると正確な回答が得られると存じます。

css
1
2    <link rel="stylesheet" href="first.css">
3    <link rel="stylesheet" href="query-first.css">
4    <link rel="stylesheet" href="_reset.css">