Alternative to box-sizing

Question

i have this box, and i want to make it responsive

    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>

I want to make ul 100% width and li centered with padding, but if add padding, li go outside of ul width. I don't want to use box-sizing

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

is there any other method alternative to box-sizing to achieve this please?

Answer 1

Simply remove useless properties and no need to use 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>