title: Why the items are not in center of the page (margin:auto)
body: <p>I have this html code</p>
  
  <pre><code>&lt;section id="ItemsContainer"&gt;
      &lt;div id="FirstItem"&gt;
          This is First Item
      &lt;/div&gt;
      &lt;div id="SecondItem"&gt;
          This is Second Item
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>and this is my css style</p>
  
  <pre><code>#FirstItem, #SecondItem {
      text-align: center;
      float: left;
      padding: 5px;
  }
  
      #FirstItem *, #SecondItem * {
          margin-left: auto;
          margin-right: auto;
      }
  
  @media screen and (min-width: 600px) {
      #ItemsContainer {
          margin-left: auto;
          margin-right: auto;
          width: 500px;
          padding: 5px;
      }
  
      #FirstItem, #SecondItem {
          margin-left: auto;
          margin-right: auto;
          width: 200px;
          text-align: center;
          float: left;
          padding: 5px;
      }
  }
  </code></pre>
  
  <p>and this is the <a href="http://jsfiddle.net/ahmadalli/AJUsA/1/" rel="nofollow">jsfiddle</a> of the code</p>
  
  <p>the problem is they are in center of the page but not exactly in center of the page. Can anybody help me?</p>