javascript - Position bar left within center tag -


within index.html, have created following div, located within center tag.

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

this looks on page: [progress bar image]1

i blue bar, positioned left of container.

below css:

/* progress bar */ .container { width: 400px; }  .bar { width: 100%; background: #eee; padding: 3px; border-radius: 3px; box-shadow: inset 0px 1px 3px rgba(0,0,0,.2); }  .bar-fill { height: 20px; display: block; background: cornflowerblue; width: 80%; border-radius: 3px; } 

once again, blue bar (div labelled bar or bar fill) positioned left inside container.

thanks.

simply add margin-left: 0px; .bar-fill

.container {    width: 400px;  }  .bar {    width: 100%;    background: #eee;    padding: 3px;    border-radius: 3px;    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);  }  .bar-fill {    height: 20px;    display: block;    margin-left: 0px;    background: cornflowerblue;    width: 80%;    border-radius: 3px;  }
<div class="container">    <div class="bar">      <span class="bar-fill"></span>    </div>  </div>


Comments