html - Bar fill and Bar unfilled doesn't ovelap -

i trying create css progress bar reason unfill part (white background) doesn't overlap green background fill part.

any idea how make that?

also browser should or not work since @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 {     {width: 0%;}     {width: 100%;} }   /* standard syntax */  @keyframes mymove {    {width: 0%;}     {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 jsfiddle: https://jsfiddle.net/xdbb3ypc/1/

thanks!

please provide jsfiddle also

just position 'filled' part inside 'unfilled', ie that:

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