Добавление правого / нижнего поля в полноэкранный мод Bootstrap

Question

В моем коде я хочу, чтобы мой мод Bootstrap был полноэкранным, но с полем в 50px.В настоящее время модальное поле имеет верхнее и левое поля, но не правое и нижнее.

$('#exampleModal').modal('show')

.modal-dialog {
  min-width:100%;
  height: 100%;
  margin: 20px !important;
  padding: 0;
}

.modal-content {
  min-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      Content
    </div>
  </div>
</div>