railsでインプットフォームのレイアウトがずれてしまう

Railsで下記URLを参考にユーザー検索フォームを追加したのですがレイアウトがズレてしまい見栄え的によくありません。
自分でもBootstrap3から4への移行の際の変更箇所を参考にしながら変えてみたのですがうまく反映されません。
参考URL：https://qiita.com/sconeman/items/fca9efa22536b8b2a9ef

現在、私が使用しているBootstrapのバージョンが4のためそれが原因と考えられるのですが、どの箇所を修正すればいよいかわかりません。ご存じの方がいらっしゃったら教えていただけると幸いです。

app/views/users/_search_form.html.erb

HTML
1<%= search_form_for @q do |f| %>
2  <div class="input-group">
3    <%= f.text_field :name_cont, placeholder: "Enter username...",class: 'form-control' %>
4    <div class="input-group-append">
5     <%= f.submit "Go", class: "btn btn-primary" %>
6    </div>
7  </div>
8<% end %>

app/views/users/index.html.erb

HTML
1<% provide(:title, @title) %>
2<h1><%= @title %></h1>
3
4<div class="search_form">
5  <%= render 'users/search_form' %>
6</div>
7
8<%= will_paginate(@users, renderer: WillPaginate::ActionView::Bootstrap4LinkRenderer) %>
9
10<% unless @users.empty? %>
11  <ul class="users">
12    <%= render @users %>
13  </ul>
14<% else %>
15  <p>
16    Couldn't find any user.<br>
17    Please check username you are looking for.
18  </p>
19<% end %>
20
21<%= will_paginate(@users, renderer: WillPaginate::ActionView::Bootstrap4LinkRenderer) %>
22
23

CSS
1/*User search Bar*/
2.search_form {
3  overflow: auto;
4  margin: 10px;
5  float: right;
6  .input-group {
7    width: 300px;
8    .form-control {
9      width: 250px;
10    }
11    .btn {
12      width: 50px;
13    }
14  }
15}

m.ts10806

2020/11/02 00:51

どのようにしたいのでしょうか。

morimoriservice

2020/11/02 03:13

コメントありがとうございます! 左上の入力ボックス(Enter Username)とGoと記載されたボタンのサイズを合わせたいです。

tomtomtomtom

2020/12/01 01:37

こちらの質問は解決されましたか？未だでしたら、該当箇所のcssもみたいと思います。できればコピペで現状を再現できるhtmlとcssをお願いしたいです。

morimoriservice

2020/12/02 00:40

返信ありがとうございます。 HTMLについては最初に質問を出した際に添付してあるもので再現できると思います対応するCSSについては今添付しましたのでご確認くださいよろしくお願いいたします。

no1knows

2020/12/02 01:13

Bootstrap＋独自のCSSで実装しているということでしょうか？

tomtomtomtom

2020/12/02 01:14

これ、htmlでなく、erbなんですよね^^;

tomtomtomtom

2020/12/02 01:15

cssもscssですね^^;

tomtomtomtom

2020/12/02 01:21

うーんやってみます！

tomtomtomtom

2020/12/02 01:33

やってみました。 html ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="about.css"> <title>abc</title> </head> <body> <h1>hogehoge</h1> <div class="search_form"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter username..."> <div class="input-group-append"> <input type="submit" class="btn btn-primary" value="Go"> </div> </div> </div> </body> </html> ``` css ``` .search_form { overflow: auto; margin: 10px; float: right; } .search_form .input-group{ width: 300px; } .search_form .input-group .form-control{ width: 250px; } .search_form .input-group .btn{ width: 50px; } ``` 再現しませんでした。これ以上は、はやり、htmlとcssがほしいですね^^