html 要素の移動方法を知りたい

画像の通り　リンクを右側に持っていきたいのです。
float:right;とmargin-rightで
それらしく動かすことはできたのですが
ふつう　こういうところはどのようにするべきなのですか？
わからないので参考になるリンクまたはやり方を教えてください。

以下コード

css
1// Place all the styles related to the top controller here.
2// They will automatically be included in application.css.
3// You can use Sass (SCSS) here: http://sass-lang.com/
4@media(min-width: 1000px){
5    body{
6        width: 100%;
7        background-color: #dcdcdc;
8        box-sizing: border-box;
9        margin: 0;
10    }
11    
12    header{
13        width: 100%;
14        height: 60px;
15        background-color: #696969;
16    }
17    
18    .title_image{
19        margin-left: 200px;
20    }
21    
22    .link_contents{
23        display: inline-block;
24    }
25}

html
1<!-- ヘッダー　はじめ-->
2 <header>
3     <div class="title_image"><!--  タイトル画像 -->
4      <%= image_tag('title',:size => "200x60") %>
5     </div>
6     <div class="link_contents">
7         <%= link_to "ホーム","#",method: :get %>
8         <%= link_to "新規登録","#",method: :get %>
9         <%= link_to "ログイン","#",method: :get %>
10     </div>
11 </header>
12<!--　ヘッダー　おわり -->

html
1#Application.html
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>Sampletest</title>
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8
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    <%= yield %>
15  </body>
16</html>
17