title: How do I apply padding to a div without affecting center alignment?
body: <p>Very simple test case:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Weird Centering Demo&lt;/title&gt;
          &lt;style type='text/css'&gt;
              body
              {
                  margin: 0px;
              }
  
              .test1
              {
                  width: 100%;
                  padding: 100px;
                  text-align: center;
                  background-color: #acf;
              }
  
              .test2
              {
                  width: 100%;
                  padding: 10px;
                  text-align: center;
                  background-color: #aaf;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class='test1'&gt;Test 1&lt;/div&gt;
          &lt;div class='test2'&gt;Test 2&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Both of the divs in the page above should be centering the text they contain. However, somehow increasing the padding for Test 1 moves its text to the right. When inspecting this in the chrome developer tools, it appears the 100px padding applies on the left and not the right. I'm having trouble understanding this asymmetrical behaviour and am not having any luck experimenting with setting padding-left and padding-right individually either.</p>
  
  <p>What's the idiomatic way to apply padding without changing centered text alignment?</p>