圆圈漏出边界

Question

我为我的网站设计了一个倒数计时器。问题是倒计时圈“漏出”边界。

链接到图片：http://imgur.com/lPR11LU HTML代码

div#sectioner {
  position: relative;
  background-color: white;
  z-index: 200;
  display: inline-block;
  height: auto;
  border: 500px;
  width: 100%;
  padding-top: 5%;
  padding-bottom: 5%;
}
.countdown-container {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
  height: 40%;
  display: inline-block;
}
.clock-item .inner {
  height: auto;
  float: left;
  position: relative;
  width: 15%;
  display: inline-block;
  padding-right: 5%;
  padding-left: 5%;
}
.clock-canvas {
  background-color: rgba(54, 194, 182, 0.96);
  border-radius: 100%;
  display: inline-block;
  height: 0px;
  position: relative;
  width: 100%;
  height: 100%;
}
.text {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  top: 2%;
  text-align: center;
  left: 39%;
  width: 20%;
}
.text .val {
  font-size: 50px;
}
.text .type-time {
  font-size: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .clock-item {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .clock-item {
    margin: 0px 30px 30px 30px;
  }
}

<div id="sectioner" class="post" display="inline-block">


  <div class="countdown countdown-container container" display="inline-block">
    <div class="clock row">
      <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3" display="inline-block">
        <div class="wrap" display="inline-block">
          <div class="inner" display="inline-block">
            <div id="canvas-days" class="clock-canvas" display="inline-block"></div>

            <div class="text" display="inline-block">
              <p class="val">0</p>
              <p class="type-days type-time">DAYS</p>
            </div>
            <!-- /.text -->
          </div>
          <!-- /.inner -->
        </div>
        <!-- /.wrap -->
      </div>
      <!-- /.clock-item -->

      <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3" display="inline-block">
        <div class="wrap" display="inline-block">
          <div class="inner" display="inline-block">
            <div id="canvas-hours" class="clock-canvas" display="inline-block"></div>

            <div class="text">
              <p class="val">0</p>
              <p class="type-hours type-time" display="inline-block">HOURS</p>
            </div>
            <!-- /.text -->
          </div>
          <!-- /.inner -->
        </div>
        <!-- /.wrap -->
      </div>
      <!-- /.clock-item -->

      <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3" display="inline-block">
        <div class="wrap" display="inline-block">
          <div class="inner" display="inline-block">
            <div id="canvas-minutes" class="clock-canvas" display="inline-block"></div>

            <div class="text" display="inline-block">
              <p class="val">0</p>
              <p class="type-minutes type-time">MINUTES</p>
            </div>
            <!-- /.text -->
          </div>
          <!-- /.inner -->
        </div>
        <!-- /.wrap -->
      </div>
      <!-- /.clock-item -->

      <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3" display="inline-block">
        <div class="wrap">
          <div class="inner">
            <div id="canvas-seconds" class="clock-canvas" display="inline-block"></div>

            <div class="text">
              <p class="val">0</p>
              <p class="type-seconds type-time">SECONDS</p>
            </div>
            <!-- /.text -->
          </div>
          <!-- /.inner -->
        </div>
        <!-- /.wrap -->
      </div>
      <!-- /.clock-item -->
    </div>
    <!-- /.clock -->
  </div>
  <!-- /.countdown-wrapper -->

我不明白为什么圆圈漏出边界。任何帮助，将不胜感激。 :)