アイコンが右寄せできない

HTML内の<i class="fas fa-bars"></i>にmargin:0 auto;やmargin-left:auto;など試しても右寄せされません。bootstrapは使ってません。お願いします！

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>模写２</title>
7    <link rel="stylesheet" href="copy.css">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
9</head>
10<body>
11    <header>
12      <div class="head">
13        <a href="#"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNjAiIGhlaWdodD0iNTgiIHZpZXdCb3g9IjAgMCAzNjAgNTgiPgogICAgPGRlZnM+CiAgICAgICAgPHN0eWxlPgogICAgICAgICAgICAuY2xzLTF7ZmlsbDojMjI0NzVkfQogICAgICAgIDwvc3R5bGU+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iY29tbW11bmVfbG9nbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ3LjI3OSAtMjYuNDg2KSI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwXzM3OSIgZGF0YS1uYW1lPSJHcm91cCAzNzkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMS41NyA0My4yNjEpIj4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTgzIiBkPSJNMjIzLjU2NiA4Ny4xODhjLTMuMDU5IDMuOTcyLTcuMzUzIDUuOTU5LTEyLjkzNiA1Ljk1OS05LjcxNSAwLTE2LTYuNi0xNi0xNC45MjIgMC04LjUzNSA2LjY1Ni0xNS4wODMgMTYuMS0xNS4wODMgNS41ODIgMCAxMC4zMDUgMi4zMDggMTMuMTUxIDYuNWwtNS45NTggMy4yNzRhOC45NzIgOC45NzIgMCAwIDAtNy4xMzktMy4yMjFjLTUuNDc1IDAtOC45NjQgMy43LTguOTY0IDguNjQyIDAgNC44MzEgMy4zODIgOC4yNjYgOC42NDIgOC4yNjZhOS4wNjQgOS4wNjQgMCAwIDAgNy40NjEtMy4yNzR6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxODMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTQuNjM1IC02My4xNDEpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE4NCIgZD0iTTI5MC41NDkgNzguMTE3YTE0Ljk0OSAxNC45NDkgMCAxIDEtMTUuMTM3LTE0Ljk3NiAxNC44NDkgMTQuODQ5IDAgMCAxIDE1LjEzNyAxNC45NzZ6bS0yMi43IDBjMCA0LjgzMSAzLjA1OSA4LjI2NiA3LjY3NiA4LjI2NiA0LjQgMCA3LjgzNy0zLjIyIDcuODM3LTguMjEyIDAtNC44MzEtMy4xNjctOC4yNjYtNy44MzctOC4yNjYtNC40Ni0uMDA1LTcuNjggMy40ODgtNy42OCA4LjIxMnoiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE4NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyOC45ODIgLTYzLjE0MSkiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTg1IiBkPSJNMzU0LjkwOSA5Mi4zOTVoLTcuMTM5Vjc4LjZjMC01LjUyOC0xLjA3NC04LjkxLTUuMDQ2LTguOTEtMy41NDMgMC02LjExOSAyLjktNi4xMTkgOC43NDl2MTMuOTU2aC03LjEzOXYtMjguNWg3LjEzOXYzLjI3NGExMS45MjMgMTEuOTIzIDAgMCAxIDguOTEtNC4wMjYgOC45NTQgOC45NTQgMCAwIDEgOC4zMiA1LjFjMi42My0zLjMyOCA1LjI2LTUuMSA5LjU1NC01LjFhOS42OTQgOS42OTQgMCAwIDEgNy42MjIgMy4zMjhjMS44NzggMi4zNjIgMi4wOTMgNS40NzUgMi4wOTMgOS4yMzJ2MTYuNjkyaC03LjEzOVY3Ni42NjdjMC00LjY3LTEuNjY0LTYuOTc4LTQuODg1LTYuOTc4LTMuNiAwLTYuMTczIDIuNzkyLTYuMTczIDguNjQyeiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTg1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjY0Ljc4NSAtNjMuMTQxKSIvPgogICAgICAgICAgICA8cGF0aCBpZD0iUGF0aF8xODYiIGQ9Ik00NTQuNDkzIDkyLjM5NWgtNy4xMzlWNzguNmMwLTUuNTI4LTEuMDc0LTguOTEtNS4wNDYtOC45MS0zLjU0MyAwLTYuMTE5IDIuOS02LjExOSA4Ljc0OXYxMy45NTZoLTcuMTM5di0yOC41aDcuMTM5djMuMjc0YTExLjkyMiAxMS45MjIgMCAwIDEgOC45MS00LjAyNiA4Ljk1NCA4Ljk1NCAwIDAgMSA4LjMyIDUuMWMyLjYzLTMuMzI4IDUuMjYtNS4xIDkuNTU0LTUuMWE5LjY5MiA5LjY5MiAwIDAgMSA3LjYyMiAzLjMyOGMxLjg3OSAyLjM2MiAyLjA5MyA1LjQ3NSAyLjA5MyA5LjIzMnYxNi42OTJoLTcuMTM4Vjc2LjY2N2MwLTQuNjctMS42NjQtNi45NzgtNC44ODUtNi45NzgtMy42IDAtNi4xNzMgMi43OTItNi4xNzMgOC42NDJ6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxODYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMTYuNTk1IC02My4xNDEpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE4NyIgZD0iTTU1NC4wNzcgOTIuMzk1aC03LjE0Vjc4LjZjMC01LjUyOC0xLjA3My04LjkxLTUuMDQ1LTguOTEtMy41NDMgMC02LjExOSAyLjktNi4xMTkgOC43NDl2MTMuOTU2aC03LjEzOXYtMjguNWg3LjEzOXYzLjI3NGExMS45MjMgMTEuOTIzIDAgMCAxIDguOTEtNC4wMjYgOC45NTQgOC45NTQgMCAwIDEgOC4zMiA1LjFjMi42My0zLjMyOCA1LjI2LTUuMSA5LjU1NC01LjFhOS42OTIgOS42OTIgMCAwIDEgNy42MjIgMy4zMjhjMS44NzkgMi4zNjIgMi4wOTQgNS40NzUgMi4wOTQgOS4yMzJ2MTYuNjkyaC03LjEzOVY3Ni42NjdjMC00LjY3LTEuNjY0LTYuOTc4LTQuODg1LTYuOTc4LTMuNiAwLTYuMTczIDIuNzkyLTYuMTczIDguNjQyeiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTg3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzY4LjQwNiAtNjMuMTQxKSIvPgogICAgICAgICAgICA8cGF0aCBpZD0iUGF0aF8xODgiIGQ9Ik02MjguMzE1IDY0LjcwOGg3LjEzOXYxNC44NjhjMCA1LjEgMS42MSA3Ljc4MyA1LjM2OCA3Ljc4MyAzLjgxMSAwIDUuMzY4LTIuNjMgNS4zNjgtNy40NjF2LTE1LjE5aDcuMTM5djEzLjE1YzAgNS4yNjEtLjMyMiA5LjEyNS0zLjMyOCAxMi40NTMtMi4yNTQgMi41MjMtNS4yMDYgMy42LTkuMTc5IDMuNi02Ljg3MSAwLTExLjExMS0zLjQ4OS0xMi4yMzgtMTAuMTQ1YTMyLjA0MiAzMi4wNDIgMCAwIDEtLjI2OC02LjAxMXoiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE4OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQyMC4yNTkgLTYzLjk1NikiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTg5IiBkPSJNNjk2LjkgNjYuNzkxYzIuNzM3LTIuMzA4IDUuMjYtMy42NSA4LjQyNy0zLjY1YTkuMzgxIDkuMzgxIDAgMCAxIDkuNzY5IDkuNzY5djE5LjQ4NWgtNy4xMzlWNzguOTIyYzAtNS42MzYtLjQ4My05LjIzMi00LjgzMS05LjIzMmE1LjYgNS42IDAgMCAwLTQuODMxIDIuNzM4Yy0xLjQ0OSAyLjMwOC0xLjQgNC44ODUtMS40IDcuODM3djEyLjEzaC03LjEzOXYtMjguNWg3LjE0NHoiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE4OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ1Mi4yMzUgLTYzLjE0MSkiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTkwIiBkPSJNNzc2LjYzMiA4Ni44NjZjLTMuMDU5IDQuMzQ4LTcuMDg1IDYuMjgxLTEzLjEgNi4yODEtOS4wNzEgMC0xNC45MjItNi42NTYtMTQuOTIyLTE1LjAzIDAtNy43ODMgNS42MzYtMTQuOTc2IDE0LjgxNS0xNC45NzYgOS4wMTcgMCAxNS4xMzYgNi40NDEgMTUuMTM2IDE1LjQ1OSAwIC42NDQtLjA1My45NjYtLjA1MyAxLjYxaC0yMi45NzFjLjcgNC4yNCAzLjkxOSA2LjYgOCA2LjZhOS4yMjYgOS4yMjYgMCAwIDAgNy4wODYtMi43OTF6bS01LjI2LTEyLjI5MmMtLjk2Ni0zLjMyOC00LjAyNi01LjM2OC03LjgzNy01LjM2OGE3Ljc4IDcuNzggMCAwIDAtNy42NzUgNS4zNjh6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00ODIuODU1IC02My4xNDEpIi8+CiAgICAgICAgPC9nPgogICAgICAgIDxnIGlkPSJHcm91cF8zODAiIGRhdGEtbmFtZT0iR3JvdXAgMzgwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ny4yNzkgMjYuNDg2KSI+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5MSIgZD0iTTg3Ljc0NSAyNi40ODZINjYuMTYzQTE4LjY5NCAxOC42OTQgMCAwIDAgNDcuMjc5IDQ0Ljk0djIxLjA5MmExOC42OTQgMTguNjk0IDAgMCAwIDE4Ljg4NCAxOC40NTRoMjEuNTgyYTE4LjY5NCAxOC42OTQgMCAwIDAgMTguODg0LTE4LjQ1NFY0NC45NGExOC42OTQgMTguNjk0IDAgMCAwLTE4Ljg4NC0xOC40NTR6bTEzLjQ4OSAzOS41NDZhMTMuMzUzIDEzLjM1MyAwIDAgMS0xMy40ODkgMTMuMTgySDY2LjE2M2ExMy4zNTMgMTMuMzUzIDAgMCAxLTEzLjQ4OS0xMy4xODJWNDQuOTRhMTMuMzUzIDEzLjM1MyAwIDAgMSAxMy40ODktMTMuMTgxaDIxLjU4MmExMy4zNTMgMTMuMzUzIDAgMCAxIDEzLjQ4OSAxMy4xODF6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00Ny4yNzkgLTI2LjQ4NikiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTkyIiBkPSJNMTMxLjg0MiA2Ny4wMTVhMTMuNzc4IDEzLjc3OCAwIDAgMSAyLjMwNSA1LjQ2bC4xNjkuOTI5IDYuMjktMS4xNDgtLjE3LS45MjlhMjAuMjIzIDIwLjIyMyAwIDAgMC0zLjM3OS04LjAxbC0uNTQ2LS43NjktNS4yMTUgMy43eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTkyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTAuOTkxIC00NS43MjkpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5MyIgZD0iTTExOC40OCA1NS40MjlsLjc3Ni41MzggMy42NDItNS4yNTUtLjc3Ni0uNTM3YTE5LjY5MiAxOS42OTIgMCAwIDAtNy45LTMuMjVsLTEuMS0uMjEtMS4wMSA2LjMzLjkxOC4xNTlhMTMuNTczIDEzLjU3MyAwIDAgMSA1LjQ1IDIuMjI1eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTkzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODEuMDEgLTM3LjI3MikiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTk0IiBkPSJNMTM0LjI1MSA5Mi4yNjlBMTMuNTYgMTMuNTYgMCAwIDEgMTMyIDk3Ljc1bC0uNTQuNzc0IDUuMjQ1IDMuNjU2LjUzOS0uNzc1YTE5LjcgMTkuNyAwIDAgMCAzLjI4Ni03Ljk1OGwuMjA2LTEuMTM5LTYuMzMxLS45NDh6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05MS4wNzggLTYxLjEwNCkiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTk1IiBkPSJNMTE4LjY1OCAxMTEuMTE4YTEzLjggMTMuOCAwIDAgMS01LjQ2NyAyLjI5MWwtLjkyOS4xNjcgMS4xMzMgNi4yOTIuOTI5LS4xNjdhMjAuMjQyIDIwLjI0MiAwIDAgMCA4LjAxNy0zLjM1N2wuNzcxLS41NDQtMy42ODItNS4yMjZ6IiBjbGFzcz0iY2xzLTEiIGRhdGEtbmFtZT0iUGF0aCAxOTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MS4wODcgLTcxLjMyMykiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlBhdGhfMTk2IiBkPSJNODcuODQ5IDU1LjQ5MWExMy44IDEzLjggMCAwIDEgNS40NjgtMi4yOTFsLjkyOS0uMTY3LTEuMTMzLTYuMjkyLS45MjkuMTY3YTIwLjI0NSAyMC4yNDUgMCAwIDAtOC4wMTcgMy4zNTdsLS43NzEuNTQ0IDMuNjgyIDUuMjI2eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTk2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjYuMDY5IC0zNy4yODYpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5NyIgZD0iTTc2LjMzNSA5Ny45YTEzLjc3MSAxMy43NzEgMCAwIDEtMi4zLTUuNDZsLS4xNjktLjkyOS02LjI5NSAxLjE0OS4xNy45MjlhMjAuMjE4IDIwLjIxOCAwIDAgMCAzLjM3OSA4LjAxMWwuNTQ2Ljc3IDUuMjE1LTMuN3oiIGNsYXNzPSJjbHMtMSIgZGF0YS1uYW1lPSJQYXRoIDE5NyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU3LjgzNiAtNjEuMTg2KSIvPgogICAgICAgICAgICA8cGF0aCBpZD0iUGF0aF8xOTgiIGQ9Ik03My45NjQgNzIuNjg1YTEzLjU1MyAxMy41NTMgMCAwIDEgMi4yNDctNS40ODVsLjU0LS43NzUtNS4yNDUtMy42NTYtLjU0Ljc3NWExOS43IDE5LjcgMCAwIDAtMy4yODUgNy45NThsLS4yMDYgMS4xMzkgNi4zMzEuOTQ4eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTk4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTcuNzg2IC00NS44NDkpIi8+CiAgICAgICAgICAgIDxwYXRoIGlkPSJQYXRoXzE5OSIgZD0iTTg4LjEgMTExLjIyNWwtLjc3Ni0uNTM4LTMuNjQyIDUuMjU1Ljc3Ni41MzhhMTkuNjk0IDE5LjY5NCAwIDAgMCA3LjkgMy4yNWwxLjEuMjEgMS4wMDktNi4zMy0uOTE3LS4xNTlhMTMuNTY3IDEzLjU2NyAwIDAgMS01LjQ1LTIuMjI2eiIgY2xhc3M9ImNscy0xIiBkYXRhLW5hbWU9IlBhdGggMTk5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjYuMjE4IC03MS4zODIpIi8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K"></a>
14       <i class="fas fa-bars"></i>
15    </div>
16    </header>
17</body>
18</html>

css
1body{margin: 0;
2    padding: 0;
3    width: 100%;
4    height: 100%;
5}
6header .head{position: fixed;
7            width: 100%;
8            height: 76px;
9            background-color: white;
10            top: 0px;
11            box-shadow: 0 2px 10px 2px rgb(156, 156, 156);}
12.head img{width: 150px;
13        max-width: 250px;
14        margin-left: 20px;
15        margin-bottom: auto;
16        margin-top: 28px;}
17.head i{font-size: 30px;
18        color: rgb(19, 43, 20);
19        }
20
21

m.ts10806

2020/03/02 05:23

>お願いします！何を、でしょうか。質問ではなく作業依頼ですかね。質問を書いてください。

RYO.K

2020/03/02 05:48

よくある問い合わせの中の「teratailについて知りたい」をご参照ください????

m.ts10806

2020/03/02 05:54

「質問を書いてない」という指摘ですよ？「こういう問題が起きてる。お願い！」だけの文章のどこに「質問事項」が書いてますか？赤の他人ですよ。読む人は。それにteratailのことは少なくともあなたより100倍は知っています。 https://teratail.com/questions/242562#reply-352493 にて「Font awesomeを使わなくなったため。」なんて大嘘ついて使い続けてるあなたよりは。

m.ts10806

2020/03/02 05:56

それにヘルプページをたてにとる割には守ってないじゃないですか。 https://teratail.com/help/question-tips#questionTips4-2 どのように解決したのかコメントには一切書かれていません。

RYO.K

2020/03/02 06:02

きちんとわかってくれた人が回答してくれたのでもう大丈夫です????

m.ts10806

2020/03/02 06:05

自分だけが良ければいい人にはそのうち誰も手をさしのべなくなります。大嘘ついてまで逃げてるわけですから覚悟しておいてください。客観的に見てもteratailとして非推奨の丸投げ質問です。そして「動くコードくれ」だけの作業依頼です。通報しておきます。

RYO.K

2020/03/02 06:13

あ、もう大丈夫です????

m.ts10806

2020/03/02 06:19 編集

ではもう質問しないでくださいね。ルール守れないんだから(嘘もついてるし)。あと、どうやら日本語通じてないようですし。人に読めってすすめた記事を自分で読んでないのは致命的でしょう。

RYO.K

2020/03/02 06:18

あ、もう大丈夫です????

m.ts10806

2020/03/02 06:20

Botでしたか。それは失礼。運営にも回答者にも迷惑かけてるって製作者に伝えておいてください。

RYO.K

2020/03/02 06:43

了解です！

m.ts10806

2020/03/02 06:49

さて。あなたの今後のために真面目なアドバイスしておくと、このくらいのレベルで面倒になって逃げたり他人に丸投げするようですから、別のことやったほうが人生にはプラスになります。もっと面倒で訳がわからなくて逃げたくなるようなことばかりですから。私のルール遵守の指摘など、もともと指摘されてることがおかしいくらいですから。注意されても信号無視する人を擁護する人はどの世界にもいませんしね。嘘ついたらお客さんに逃げられるどころか業界にいれなくなります。

kyoya0819

2020/03/02 08:05 編集

人のアドバイスを聞く気がないなら、学習自体をやめた方がいいです。予備校でよくいる、「俺は予備校に通ってる、受からせるのは教師らだ！」のような頭の逝かれた害児と同じことをしようとしています。

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

回答2件

ベストアンサー

.headをdisplay:flex、.head aをdisplay:block;
iにdivをラップして、display:flex;width:calc(100% - 180px);justify-content:flex-end;
align-items:center;

投稿2020/03/02 05:20

yambejp

総合スコア114883

yambejp

2020/03/02 05:28

codepen サンプル https://codepen.io/yambejp/pen/vYOZrgZ

RYO.K

2020/03/02 05:30

できましたありがとうございます????

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

.head i に float: right; を設定すれば右寄せになりますが、垂直位置を揃えたりが面倒なので、CSS Flexboxを使う方法がお勧めです。

css
1header .head {
2    position: fixed;
3    width: 100%;
4    height: 76px;
5    background-color: white;
6    top: 0px;
7    box-shadow: 0 2px 10px 2px rgb(156, 156, 156);
8    display: flex; /* 横並び */
9    justify-content: space-between; /* 両端揃え */
10    align-items: center; /* 垂直位置中央揃え */
11}