title: Two Divs on the same row and center align both of them
body: <p>I have two divs like this</p>
  
  <pre><code>&lt;div style="border:1px solid #000; float:left"&gt;Div 1&lt;/div&gt;
  &lt;div style="border:1px solid red; float:left"&gt;Div 2&lt;/div&gt;
  </code></pre>
  
  <p>I want them to display on the same row, so I used <code>float:left</code>. </p>
  
  <p>I want both of them to be at center of the page as well, so I tried to wrap them with another div like this</p>
  
  <pre><code>&lt;div style="width:100%; margin:0px auto;"&gt;
    &lt;div style="border:1px solid #000; float:left"&gt;Div 1&lt;/div&gt;
    &lt;div style="border:1px solid red; float:left"&gt;Div 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it doesn't work. If I change the code to this</p>
  
  <pre><code>&lt;div style="width:100%; margin-left:50%; margin-right:50%"&gt;
    &lt;div style="border:1px solid #000; float:left"&gt;Div 1&lt;/div&gt;
    &lt;div style="border:1px solid red; float:left"&gt;Div 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then it's going to the center, but the horizontal scrollbar is there and it seems like it's not really centered as well.</p>
  
  <p>Can you please kindly suggest to me how can I achieve this? Thanks.</p>
  
  <p>Edit: I want the inner div (Div 1 and Div 2) to be center align as well. </p>