title: Alternative to box-sizing
body: <p>i have this box, and i want to make it responsive</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    h2{
          margin: 0;
          padding: 0;
          border: 0;
      }
  
  ul {
      background: #fff;
      float: left;
      padding: 15px 0;
      width: 655px;
      border: 1px solid #000;
      border-bottom: 0;
  }
  ul li {
      float: left;
      /*width: auto;*/
      text-align: center;
      width: 202px;
      padding: 0 8px;
      margin-bottom: 7px;
  }
  ul li .img{
      position: relative;
      border: 1px solid #000;
      /*padding: 10px;*/
      padding: 0;
      text-align: center;
  }
  .info {
      background: orange;
      border: 1px solid #000;
      padding: 0 6px 5px;
      border-width: 0 1px 2px 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
        &lt;li&gt;&lt;div class="img"&gt;&lt;img src="https://static.icecreamapps.com/images/bighelpicon.png" /&gt;&lt;/div&gt; 
        &lt;div class="info"&gt;
         &lt;h2&gt;contact us&lt;/h2&gt;
        &lt;/div&gt;
       &lt;/li&gt;
        &lt;li&gt;&lt;div class="img"&gt;&lt;img src="https://static.icecreamapps.com/images/bighelpicon.png" /&gt;&lt;/div&gt; 
        &lt;div class="info"&gt;
         &lt;h2&gt;contact us&lt;/h2&gt;
        &lt;/div&gt;
       &lt;/li&gt;
     &lt;li&gt;&lt;div class="img"&gt;&lt;img src="https://static.icecreamapps.com/images/bighelpicon.png" /&gt;&lt;/div&gt; 
    &lt;div class="info"&gt;
     &lt;h2&gt;contact us&lt;/h2&gt;
    &lt;/div&gt;
   &lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to make <code>ul</code> 100% width and li centered with padding, but if add <code>padding</code>, <code>li</code> go outside of <code>ul</code> width. I don't want to use <code>box-sizing</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;</code></pre>
  </div>
  </div>
  </p>
  
  <p>is there any other method alternative to <code>box-sizing</code> to achieve this please?</p>