marginがうまくいかない。

Question

自分のコード

<% if logged_in? %>
  
  <h1>あなたの人生を昨日より豊かに</h1>
  <div class="row">
    <div class="col-sm-6">
      <div style="margin: 50px;">
      　<%= link_to timelists_path, class: "hage" do %>
        　<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-clock-fill" fill="currentColor" style="font-size:200px;" xmlns="http://www.w3.org/2000/svg">
          　<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
        　</svg>
      　<% end %>
      </body>
  　</div>
    <div class="col-sm-6">
      <div style="margin: 50px;">
        <%= link_to tasklists_path, class: "hage" do %>
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-check-fill" fill="currentColor" style="font-size:200px;" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M12 1H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm-1.146 5.854a.5.5 0 0 0-.708-.708L7.5 8.793 6.354 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
          </svg>
        <% end %>
      </div>
    </div>
  </div>
<% else %>
  <div class="center jumbotron">
      <div class="text-center">
          <h1>Welcome to the Life management</h1>
          <%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
      </div>
  </div>
<% end %>

ここのことはtimelist,tasklist両方に書いてある<div style="margin: 50px;">
です。
実行すると、

このようにバグッてしまします。

自分がやりたいこと

この二つのアイコンを真ん中に均等に横に並べたいです。
回答待ってます。

Answer 1

marginではなく
text-align: center;
だとどうでしょうか？