title: text-align right and padding right
body: <p>I've seen this posted everywhere, with no real help, or it being closed for no reason other then moderators feeling it would be 'unhelpful' in the future even though google whips up a nice result summing some 55,000+ relevant results. </p>
  
  <p>So, why won't padding-right work with a parent, and text-align right child? </p>
  
  <pre><code>.rightcbar {
      display: block;
      font-family: 'Roboto', sans-serif;
      text-shadow: 0px 0px 20px #dbd69d;
      padding-right: 50px;
      height: 152px;
      width: 592px;
      line-height: 152px;
      background: url(rightcbar.png) no-repeat;
  }
  
  .rightcbar .rightctext {
      display: inline-block;
      width: 100%;
      text-align: right;
      font-size: 25px;
      color: #f3f1de;
      font-size: 25px;
      font-family: 'Roboto', sans-serif;
      text-shadow: 0px 0px 10px #aaa;
      -webkit-font-smoothing: subpixel-antialiased;
  }
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div id="rightc"&gt;
      &lt;div class="rightcbar"&gt;
          &lt;div class="rightctext"&gt;Test&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rightcbar"&gt;
          &lt;div class="rightctext"&gt;Test&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rightcbar"&gt;
          &lt;div class="rightctext"&gt;Test&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Smeegs helped explain exactly why things were not working as I was intending below; if you are interested. Here is the revised, and working code. </p>
  
  <pre><code>.rightcbar {
      display: block;
      font-family: 'Roboto', sans-serif;
      text-shadow: 0px 0px 20px #dbd69d;
      padding-right: 50px;
      height: 152px;
      width: 592px;
      line-height: 152px;
      background: url(rightcbar.png) no-repeat;
      background-position: center right;
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;    
  }
  
  .rightcbar .rightctext {
      display: inline-block;
      width: 100%;
      text-align: right;
      font-size: 25px;
      color: #f3f1de;
      font-size: 25px;
      font-family: 'Roboto', sans-serif;
      text-shadow: 0px 0px 10px #aaa;
      -webkit-font-smoothing: subpixel-antialiased;
      cursor: pointer;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5Weyt/" rel="noreferrer">Live example</a></p>