Альтернатива размеру ящика

Question

У меня есть эта коробка, и я хочу сделать ее отзывчивой

    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;
}

<ul>
      <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
      <div class="info">
       <h2>contact us</h2>
      </div>
     </li>
      <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
      <div class="info">
       <h2>contact us</h2>
      </div>
     </li>
   <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
  <div class="info">
   <h2>contact us</h2>
  </div>
 </li>
    </ul>

я хочу сделать ul 100% ширина и li по центру с отступом, но если добавить padding, li выйти за пределы ul ширина. Я не хочу использовать box-sizing

webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

есть ли другой метод, альтернативный box-sizing чтобы достичь этого, пожалуйста?

Answer 1

Просто удалите ненужные свойства и не нужно использовать box-sizing

h2{
    margin: 0;
    padding: 0;
    border: 0;
}

ul {
    background: #fff;
    /*float: left;*/
    padding: 15px 0;
    /*width: 100%;*/
    border: 1px solid #000;
    border-bottom: 0;
}
ul li {
    /*float: left;*/
    /*width: auto;*/
    text-align: center;
    /*width: 100%;*/
    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;
}

<ul>
  <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
  <div class="info">
   <h2>contact us</h2>
  </div>
 </li>
  <li><div class="img"><img src="https://static.icecreamapps.com/images/bighelpicon.png" /></div> 
  <div class="info">
   <h2>contact us</h2>
  </div>
 </li>
</ul>