并排并排放置2个元素（倒数计时器和按钮）-它们未居中

Question

我对HTML代码中的部分内容有疑问。

我的想法很简单：将一节分成1行，分成2列。

我在左栏中尝试放置countodwn计时器，并在右栏中放置“提交”按钮。它们必须并排，彼此之间的距离相等。但是存在一些问题-它们的距离不相等，我想知道如何解决...

此外，当我测试网站的草稿在移动设备上的外观时，时钟的各个部分不会保持在一起-它们只是相互移动。

这里是jsfiddle。

我做错了什么？

<div class="container-fluid">
<div class="row align-items-center"><div class="col-6 mx-auto">    
<h3 style=" font-family: Open Sans; font-weight: light; font-size: 20px; color: 636363;letter-spacing: 1px; padding-left:110px;">Deadline:</h3>
<div id="clockdiv">
<div>   <span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>   <span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>   <span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>   <span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
<div class="col-6 mx-auto">
<button class="button button1" style="width: 300px; height: 100px;">Submit</button>
</div>
</div>
</div>    

和CSS：

  #clockdiv{
    font-family: Open Sans;
    color: #ffffff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
  }

  #clockdiv > div{
    padding: 0px;
    border-radius: 3px;
    background: #fffff;
    display: inline-block;
  }

  #clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #000;
    display: inline-block;
    position: relative;

  }

  .smalltext{
    padding-top: 5px;
    font-size: 16px;
    color: #000;
    position: relative;

  }

  .button {
    background-color: #fff; 
    border: none;
    color: white;
    text-align: center;
    text-decoration: none; 
    font-size: 16px;
    font-family: 'Open Sans';
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
    cursor: pointer;
  }

  .button1 {
    background-color: white; 
    color: #000; 
    border: 2px solid #000;

  }

  .button1:hover {
    background-color: #fff;
    color: white;