【Ruby on rails】「ログイン・新規登録」のボタンが上寄りになってしまった。。。

お忙しい中　ありがとうございます。

端末情報・アプリケーション

前提

今現在この動画を見ながら勉強をしておりますが、
現在【ログイン・新規登録】のボタンが上寄りになってしまっています。

自分が考えている理想は【レシピ一覧・レシピグラマー一覧】みたいなように真ん中にボタンを置きたいのですが、上手くいきません。
この原因についてもし知っている人がいれば教えていただけないでしょうか？。宜しくお願い致します。

ソースコード

Ruby
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Recipegram</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
9    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
11  </head>
12
13  <body>
14    <% if flash[:notice] %>
15      <div class="notification is-info">
16        <p class="notice"><%= notice %></p>
17      </div>
18    <% end %>
19
20    <% if flash[:alert] %>
21      <div class="notification is-danger">
22        <p class="alert"><%= alert %></p>
23      </div>
24    <% end %>
25    
26    
27    
28    <nav class="navbar is-warning">
29      <div class="navbar-brand">
30        <%= link_to root_path, class: "navbar-item" do %>
31          <h1 class="title is-4" style="font-family: cursive;">recipegram</h1>
32        <% end %>
33        <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
34          <span></span>
35          <span></span>
36          <span></span>
37        </div>
38      </div>
39
40      <% if user_signed_in? %>
41        <div id="navbarExampleTransparentExample" class="navbar-menu">
42          <div class="navbar-item">
43            <%= link_to "レシピ一覧", recipes_path,class: "navbar-item button is-warning is-light" %>
44          </div>
45          <div class="navbar-item">
46            <%= link_to "新規投稿", new_recipe_path,class: "navbar-item button is-warning is-light" %>
47          </div>
48            <div class="navbar-end">
49              <div class="navbar-item">
50                <div class="field is-grouped">
51                  <p class="control">
52                    <%= link_to "レシピグラマー 一覧", users_path, class: "button is-warning is-light" %>
53                  </p>
54                  <p class="control">
55                    <%= link_to "マイページ", user_path(current_user),class: "button is-warning is-light" %>
56                  </p>
57                  <p class="control">
58                    <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "button is-warning is-light" %>
59                  </p>
60                </div>
61              </div>
62            </div>
63          </div>
64        </div>
65      <% else %>
66        <div id="navbarExampleTransparentExample" class="navbar-menu">
67          <div class="navbar-item">
68            <%= link_to "レシピ一覧", recipes_path,class: "navbar-item button is-warning is-light" %>
69          </div>
70          <div class="navbar-item">
71            <%= link_to "レシピグラマー 一覧", users_path, class: "navbar-item button is-warning is-light" %>
72          </div>
73          <div class="navbar-end">
74            <div class="navbar-item">
75            </div>
76              <div class="field is-grouped">
77                
78                <p class="control">
79                  <%= link_to "ログイン", new_user_session_path, class: "button is-warning is-light" %>
80                </p>
81                <p class="control">
82                  <%= link_to "新規登録", new_user_registration_path, class: "button is-warning is-light" %>
83                </p>
84              </div>
85            </div>
86          </div>
87          </div>
88        </div>
89      <% end %>
90
91    </nav>
92
93    
94    <%= yield %>
95  </body>
96</html>

エラーコード

特にエラーコードとかはありません。。。

最後に

もしかしたら質問の仕方が変な所がもしかしたらあったら手間がかかりますが、[質問への追記・修正の依頼]へ連絡を宜しくおねがします。
最後までお忙しい中ありがとうございました。

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

回答2件

自己解決

ここの質問は無事自己解決致しました。
見本のソースコードと自分が入力したソースコードと比べたら、ソースコードのスペルミスがあった為そのボタンが上側に寄ってしまっていた事が分かった為、修正を行ったら、無事真ん中になったので
非常に申し訳ありませんが今回は自己解決とさせていただきます。
お忙しい中ありがとうございました。

投稿2021/06/12 05:27

編集2021/06/12 05:28

Rwight

総合スコア63