アイコンの右揃えがうまくいかない

質問内容

Font Awesomeを用いてアイコンの表示はできたのですが、アイコンの右揃え及び文字の大きさ変更がうまくいきません。
エラーメッセージはありませんでした。どこの部分が間違っているかを教えていただきたいです。
よろしくお願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width,initial-scale=1">
7    <title>My app</title>
8    <link rel = "stylesheet" href="css/styles.css">
9    <script src="https://kit.fontawesome.com/80f32ffa4a.js"></script>
10    
11</head>
12
13<body>
14    <header>
15        <div class="container">
16            <i id="open_menu" class="fas fa-bars"></i>
17            <h1>My App</h1>
18        </div>
19    </header>
20    
21</body>
22
23<footer>
24</footer>
25
26</html>

css
1body{
2    background:#f8f8f8;
3    font-size:14px;
4    font-family: Verdana,sans-serif;
5    margin:0;
6    color: #333;
7}
8
9.container{
10    width:90%; 
11    margin: 0 auto;
12}
13
14header h1{
15    font-size:28px;
16    font-weight: normal;
17}
18
19#open_menu{
20    float: right;
21    font-size:24px;
22    cursor: pointer;
23}

直さなければいけない部分を教えていただきたいです。よろしくお願いいたします。

m.ts10806

2019/07/26 07:43

><link rel "stylesheet" href="css/styles.css"> そもそも上記、記述が正しくありませんが、本当にこのように書いてありますか？

m.ts10806

2019/07/26 07:45

あと、fontawesomeの本体CSSを読み込まれてないので提示内容だけでは現状が再現確認できません。

sasasa1231

2019/07/26 07:51

コメントありがとうございます。指摘された部分の記述を直しました。結果としてエラーが出てきましたのでもう一度見直してみます。エラーメッセージおよび追記のコメントを参考にもう一度考え直させていただきます。本当にありがとうございます。

m.ts10806

2019/07/26 07:54

質問本文のコードもあわせて更新してください。

sasasa1231

2019/07/26 07:57

了解です。

yoshinavi

2019/07/26 09:41

どのようなレイアウトにしたいのでしょうか？提示のコードで、質問の内容は満たしているように見えます。

sasasa1231

2019/07/26 10:16 編集

yoshinavi様コメントありがとうございます。コメント訂正させていただきます。気づきませんでいたが言われた通り上記のもので内容は満たしておりました。失礼いたしました。

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

回答1件

自己解決

表示がうまくいかない件につきましてはmts10806様のコメントにより解決いたしました。
書き直した結果うまくいきましたありがとうございました。
ついでにCSSで読み込んだ場合のソースコードについてはこちらになります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    
    <title>My app</title>
    
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet">

    
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
</head>

<body>
    <header>
        <div class="container">
            <p><i id="open_menu" class="fas fa-bars"></i></p>
            <h1>My App</h1>
        </div>
    </header>
    
</body>

<footer>
</footer>

</html>

コメントをしていただいた方々ありがとうございました。

投稿2019/07/26 09:42

編集2019/07/26 10:14

sasasa1231

総合スコア11