Bar fill and Bar unfilled doesn't ovelap

Question

I am trying to create a CSS progress bar however for some reason the UNFILL part (white background) doesn't overlap with the green background which is the FILL part.

Any idea how to make it like that?

Also which browser this should ONLY or WILL NOT work for since this is a @Keyframe CSS3?

CSS:

.container{
  width: 400px;
  margin: 0 auto;

}

.bar{
  width: 100%;
  background: #141414;
  padding: 17px;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.bar-fill{
  height: 15px;
  display: block;
  background: #45c9a5;
  width: 0%;
  border-radius: 8px;

  -webkit-transition: width 0.8s ease;
  transition: width 0.8s ease;
  -webkit-animation: mymove 5s infinite; 
  animation: mymove 5s infinite;
}


.bar-unfill{
  height: 15px;
  display: block;
  background: #fff;
  width: 100%;
  border-radius: 8px;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    from {width: 0%;}
    to {width: 100%;}
} 

/* Standard syntax */ 
@keyframes mymove {
   from {width: 0%;}
    to {width: 100%;}
}



.title{
 background: #545965;
 color: #fff;
 padding: 15px;
 float: left;
 position: relative;
 right: 60px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

Here is the JSFIDDLE: https://jsfiddle.net/xdbb3ypc/1/

Thanks!

Please provide JSFIDDLE ALSO

Answer 1

Just position 'filled' part inside 'unfilled', ie something like that:

<div class="container">
    <div class="title">Testing</div>
    <div class="bar">
        <span class="bar-unfill">
            <span class="bar-fill"></span>
        </span>
    </div>
</div>