ボタンの間に間隔をあける方法を教えてください

Question

更新ボタンとキャンセルボタンの間に間隔をあけるcssの書き方を教えてください。よろしくお願いします。

ビュー

<div class="btn-attendances-update">
  <%= f.submit "更新", class: "btn btn-primary" %>
  <%= link_to "キャンセル", user_path(@user, params:{first_day: @first_day }), class: "btn btn-default btn-block" %>
</div>

css

.btn-attendances-update {
  padding-top: 20px;
  display: flex;
  width: 30%;
  margin: auto;
}

Answer 1

.btn-attendances-update {
  padding-top: 20px;
  display: flex;
  width: 30%;
  margin: auto;
  .btn-primary{
    margin-right: 10px;
  }
}

このように書き換えたら間隔を開けることができました

Answer 2

こういう感じでしょうか。

.btn-attendances-update>.btn.btn-primary {
  margin-right: .2em;
}