ヘッダー内にあるはずのボタンがはみ出てしまう

初めて自分で0からHTML、CSS書いているものです。ヘッダー内の右横にログインと会員登録用のボタン、ページマップという名前のボタンをおこうとしたのですが、
どうしてもはみ出して次のタグに入ってしまいます。
タグに色などつけて原因究明してみたり、ボタンサイズをwidthで調整してみたりしたのですが、どうしてもヘッダータグ内に入ってくれません。
どなたか良い解決方法知らないでしょうか。それとも初心者ゆえの初歩的なのか、ご指摘願います。

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width" />
7  <title>PenFriend Home</title>
8  <link rel="stylesheet" href="style.css" />
9</head>
10<body>
11  <header>
12    <div>
13      <h2 id="red">PenFriend
14        <span id="HOME">Home
15         </span>
16       </h2>
17       <div class="right">
18         <input type="button" value="ログインか新規登録">
19        </div>
20        <div class="right" >
21          <input type="button" class=verify value="ページマップ">
22         </div>
23       </div>
24     </header>
25  <h3 id="a">PenFriendとは？</h3>
26  <h3 id= "b">どうやって使うの？</h3>
27  <h3 id= "c">Pen-Friendがメッセージを返してくれなくなったら？</h3>
28　　
29```CSS
30
31header {
32  background-color: blue;
33}
34#red{
35  color: red;
36}
37#HOME {
38  color: #EFFBFB;
39  margin-left:10px
40.white {
41  color: white;
42}
43.right{
44float:right;
45}
46#a {
47background-color:red;
48}
49#b {
50background-color:orange;
51}
52#c {
53background-color:green;
54
55
56}
57
58

スマホから手打ちで書いておりますので多少のインデントのずれはご容赦ください

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

回答1件

ベストアンサー

#redがh2タグで、h2タグはブロック要素だからだと思います。
以下のようにインライン要素を指定してみてください。

CSS
1#red {
2    display: inline; /* インライン要素にする */
3}

または以下ですとブロック要素を横並びにできます。

css
1header > div {
2    display: flex;f /* 横並びにする */
3    align-items: center; /* 高さを真ん中んする */
4}

ちなみに</header>の前に</div>が一個抜けているので足してあげてください。

投稿2020/11/06 14:03

ikatako

総合スコア270

退会済みユーザー

2020/11/06 14:28

早速の回答、それに細やかなご指摘ありがとうございました。結論から言うと、前者についてはうまく機能せず、後者については問題自体は解決したけれども,”PenFriend”と”home”が斜めの並びになってしまいました。こちらについては自分で解決できるかもしれないので、ベンストアンサー選びはとりあえず保留とさせてください。

退会済みユーザー

2020/11/06 14:58 編集

結局自分がしたかったのがredとボタン二つを揃えて少しでも見栄えをよくしたかったことなので、align-itemsをflex-startにしてみたり、文字の大きさ、文字数を少なくしてみたりしたのですが新たに発生した問題は解決できませんでした。また大変申し訳ないのですが書き忘れていた事情があり、実はアプリを使ってスマホのブラウザから結果を見ています。パソコンが使えるようになり次第そちらでも確認しますのでもう少しお待ちください。

退会済みユーザー

2020/11/07 00:48

PCでみると画面が随分と変わりました。一応スマホのブラウザ上は当初の問題はなくなったのでとりあえずベストアンサーに褪せていただきます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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

ヘッダー内にあるはずのボタンがはみ出てしまう

関連した質問