iki buton oluşturup sayfada ortalanmalarını istiyorum ama olmuyor.

<div class="center"><div><p style="text-align: center;"><b></b></p><p style="text-align: center;"><b></b></p>
  </div>  
  <div class="download-btn btn1" id="dosyacobuttonln" onclick="location.href ='#';">
    <div class="top" style="text-align: center;">
      <i class="fa fa-cloud-download"></i> X
    </div>
    <div class="bottom" style="text-align: center;">
      Boyut: 1MB
    </div>
  </div>
  <div>
    <p style="text-align: center;"><b></b></p>
  </div>  
  <div class="download-btn btn2" id="gdbuttonln2" onclick="location.href = '#';">
    <div class="top" style="text-align: center;">
      <i class="fa fa-cloud-download"></i> Y
    </div>
    <div class="bottom" style="text-align: center;">
      Boyut: 1MB
    </div>
  </div>
</div>
<style>
  
.download-btn {
  width:50%;
  height:60px;
  text-align:center;
  cursor:pointer;
  border-radius:10px;
  box-sizing:border-box;
  overflow:hidden;
  float: left;
}
.download-btn.btn1 {
  border:4px solid #3afdac;
  margin: 0 auto;
  display: inline-block;
  padding: 0 5px;
}
.download-btn.btn2 {
  border:4px solid #3afdac;
  margin: 0 auto;
  display: inline-block;
  padding: 0 5px;
}
.download-btn div {
  width:100%;
  height:100%;
  font-size:15px;
  font-weight:600;
  text-transform:uppercase;
  line-height:50px;
}
.download-btn.btn1 .top {
  background:#5f4b8b;
}
.download-btn.btn2 .top {
  background:#5f4b8b;
}

.download-btn .bottom {
  background:#eee;
  color:#222;
}
.download-btn .top {
  transition:all 300ms ease-in-out;
}
.download-btn:hover .top {
  margin-top:-50px;
}
</style>  
<script type="text/javascript">
    document.getElementById("dosyacobuttonln").onclick = function () {
        location.href = "#";
    };
</script>
<script type="text/javascript">
    document.getElementById("gdbuttonln2").onclick = function () {
        location.href = "#";
    };
</script>
<br>

Bunlar birbirlerine yapışıyorlar ve genişlikleri çok büyük. Genişliklerini küçülttüğümde sola yaslanıyorlar. Nasıl bu butonları hem ortalayıp hem de araların yaklaşık 5 piksel büyüklüğünde bir boşluk açabilirim? Teşekkürler.