title: How to make this counter section in my website responsive?
body: <p>I am a new web designer and I am struggling right now in designing a responsive counter section which shows the number of happy clients, line of codes and so on.</p>
  
  <p>Here's my <strong>HTML Code:</strong></p>
  
  <pre><code> &lt;section id="call-to-action-2" class="section-padding"&gt;
          &lt;div data-velocity="-.3" class="overlay-bg cta-bg"&gt;&lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                      &lt;div class="counter-item"&gt;
                          &lt;i class="fa fa-cloud-upload"&gt;&lt;/i&gt;
                          &lt;div class="timer" id="item1" data-to="991" data-speed="5000"&gt;&lt;/div&gt;
                          &lt;h5&gt;Training Courses&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                      &lt;div class="counter-item"&gt;
                          &lt;i class="fa fa-check"&gt;&lt;/i&gt;
                          &lt;div class="timer" id="item2" data-to="7394" data-speed="5000"&gt;&lt;/div&gt;
                          &lt;h5&gt;Affiliates&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                      &lt;div class="counter-item"&gt;
                          &lt;i class="fa fa-code"&gt;&lt;/i&gt;
                          &lt;div class="timer" id="item3" data-to="18745" data-speed="5000"&gt;&lt;/div&gt;
                          &lt;h5&gt;Accreditations&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 col-sm-3 col-md-3"&gt;
                      &lt;div class="counter-item"&gt;
                          &lt;i class="fa fa-male"&gt;&lt;/i&gt;
                          &lt;div class="timer" id="item4" data-to="8423" data-speed="5000"&gt;&lt;/div&gt;
                          &lt;h5&gt;Happy clients&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS Code:</strong></p>
  
  <pre><code>.counter-item {
      position: relative;
      text-align: center;
  }
  
      .counter-item h5 {
          text-align: center;
          margin-bottom: 0px;
          text-transform: uppercase;
      }
  
      .counter-item i {
          font-size: 40px;
      }
  
  
  .timer {
      font-size: 48px;
      font-weight: 800;
      text-transform: uppercase;
      text-align: center;
      line-height: 80px;
  }
  </code></pre>
  
  <p>Here's the link to JSFiddle that includes all of the previous code with the external resources: <a href="https://jsfiddle.net/bjwroqym/" rel="nofollow noreferrer">https://jsfiddle.net/bjwroqym/</a>
  I just wanna make space between each timer in the below snapshot:</p>
  
  <p><a href="https://i.stack.imgur.com/U2Jb9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U2Jb9.png" alt="enter image description here"></a></p>
  
  <p>The expected result of this code for a desktop or iPad screen size is very well and nice. </p>
  
  <p><a href="https://i.stack.imgur.com/lFFo0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lFFo0.png" alt="enter image description here"></a></p>
  
  <p>However, for the mobile screen size is not displayed properly and I don't know why. <strong>Could you please tell me how to fix this design issue?</strong> </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I tried what @Georgie suggested to me, and I got the following result:</p>
  
  <p><a href="https://i.stack.imgur.com/xlmvY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xlmvY.png" alt="enter image description here"></a></p>