flex要素の一部を右寄せしたい

前提・実現したいこと

ホームページの模写を行っておりそのページのヘッダー部分のお問合せボタンを右寄せしたい
https://isara.life/　←模写のお手本サイト

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

ヘッダー部の要素を横並びにするために親要素（.top-bar）にflexを指定して横並びにした
お問合せボタン（#oto-btn)だけを右寄せしたいので親要素（.top-bar)にposition:relative:を指定し、お問合せボタン（#oto-btn）にはposition:absolute; right:0px;を指定したが左詰まりのまま動かない
またお問合せボタン（#oto-btn)にはmargin:0 0 0 auto;やmargin-left:200px;のようにmarginを指定しても動かなかった

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<title>copy</title>
6	<link rel="stylesheet" href="copy.css">
7	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
8</head>
9
10<body>
11
12	<header>
13		
14		<div class="top">
15			
16			<div class="top-bar">
17			
18				<div id="top-pic">
19					<img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="">
20				</div>
21
22				<div>
23					<p>バンコクのノマドエンジニア養成講座</p>
24				</div>
25
26				<div　id="oto-btn">
27					<a href="#" ><div class="ot-btn">お問い合わせ/資料請求はこちら</div></a>
28				</div>
29
30			</div>
31
32		</div>
33	
34	
35	</header>
36	
37	
38	
39	
40</body>
41</html>

css
1*{
2	margin:0;
3}
4body{
5	font-family: Osaka;
6}
7a{
8	text-decoration: none;
9}
10header{
11	height:76px;
12	width:1175px;
13	margin:0 auto;
14	background-color:aquamarine;
15	display:flex;
16	align-items:center;
17}
18
19.top-bar{
20	display:flex;
21	align-items:center;
22	width:100%;
23	position:relative;
24}
25
26.top{
27	background-color:orange;
28	width:100%;
29	height:47px;
30}
31#top-pic{
32	height:47px;
33}
34
35#top-pic img{
36	height:100%;
37	widht:130px
38}
39#oto-btn {
40	height:47px;
41	width:306px;
42	osition: absolute;
43	right:0px;
44}
45.ot-btn{
46	height:47px;
47	width:100%;
48	display:flex;
49	align-items:center;
50	color:white;
51	background-color:rgb(218,107,100);
52}
53

現在のページ画像（分かりやすい様にbackground-colorを指定しています）

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

エディタはadobeのdreamwaver
実行環境はgoogle chrome

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

回答1件

ベストアンサー

まず、HTMLの下記の部分に全角空白がありますので、半角空白に修正してください。
このためにCSSが効いていません。（最初、気づかずに苦労しました）

html
1     <div　id="oto-btn">
2         ↑ここ

CSSは下記のようにmargin-left: auto;を追加すると右寄せになります。

css
1#oto-btn {
2    margin-left: auto;
3    height:47px;
4    width:306px;
5/* 以下不要なので削除  
6    position: absolute;
7    right:0px; */
8}
9

投稿2020/03/29 08:11

hatena19

総合スコア33715

ritsu.m

2020/03/29 08:14

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

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

flex要素の一部を右寄せしたい

前提・実現したいこと

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

該当のソースコード

現在のページ画像（分かりやすい様にbackground-colorを指定しています）

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

関連した質問