title: Positioning 2 elements (countdown timer and button) in row, side by side - they are not centered
body: <p>I have a problem with one of sections in my HTML code.</p>
  
  <p>My idea is simply: one section made by 1 row, who is divided on 2 columns. </p>
  
  <p>In left column i tried to put countodwn timer, and "submit" button in right column. They have to be side by side, and on equal distance in regards to each other; but there are some problems - they are on unequal distance and i am wondering how to fix it...</p>
  
  <p>Also, when i test how draft of my site looks on mobile, parts of the clock do not stay together - they just move under each other. </p>
  
  <p>Here is a <a href="https://jsfiddle.net/bc2e7y1n/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>What i am doing wrong? </p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row align-items-center"&gt;&lt;div class="col-6 mx-auto"&gt;    
  &lt;h3 style=" font-family: Open Sans; font-weight: light; font-size: 20px; color: 636363;letter-spacing: 1px; padding-left:110px;"&gt;Deadline:&lt;/h3&gt;
  &lt;div id="clockdiv"&gt;
  &lt;div&gt;   &lt;span class="days"&gt;&lt;/span&gt;
  &lt;div class="smalltext"&gt;Days&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;   &lt;span class="hours"&gt;&lt;/span&gt;
  &lt;div class="smalltext"&gt;Hours&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;   &lt;span class="minutes"&gt;&lt;/span&gt;
  &lt;div class="smalltext"&gt;Minutes&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;   &lt;span class="seconds"&gt;&lt;/span&gt;
  &lt;div class="smalltext"&gt;Seconds&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-6 mx-auto"&gt;
  &lt;button class="button button1" style="width: 300px; height: 100px;"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>  #clockdiv{
      font-family: Open Sans;
      color: #ffffff;
      display: inline-block;
      font-weight: 100;
      text-align: center;
      font-size: 30px;
    }
  
    #clockdiv &gt; div{
      padding: 0px;
      border-radius: 3px;
      background: #fffff;
      display: inline-block;
    }
  
    #clockdiv div &gt; 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;
  </code></pre>