title: How does css left / position works with bootstrap header
body: <p>I dont' understand why css left does not work.</p>
  
  <p>In my <strong>html</strong> I have page-header from boostrap</p>
  
  <pre><code>&lt;div class="page-header"&gt;
    &lt;h1&gt;Page-header&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="all charts"&gt;
     &lt;div id="chart1"&gt;&lt;/div&gt;
     &lt;div id="chart2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my <strong>.css</strong></p>
  
  <pre><code>.page-header {
    background-color: none;
    width: 1000%;
  }
  
  .allcharts {
    left: 20px;
  }
  
  #chart1 {
    width: 2000%;
    float: left;
  }
  </code></pre>
  
  <p>how come my allcharts ( want 20 px from the left ) and chart 1 and 2 are not taking the <strong>left</strong> postion from .css , they both have the same left position as my page-header even when I try to overwrite it in css</p>
  
  <p><img src="https://i.stack.imgur.com/gB8d7.png" alt="enter image description here"></p>