css - How to maximum size without exceed the size? -

i'm trying , , succeed .

here html code :

<div class="container">     <ul class="list-green scoutcondensedregular">         <li></li>         <li></li>         <li></li>         <li></li>     </ul>     <ul class="list-green scoutcondensedregular">         <li></li>         <li></li>         <li></li>         <li></li>     </ul>     <ul class="list-green scoutcondensedregular">         <li></li>         <li></li>         <li></li>         <li></li>     </ul>     <ul class="list-green scoutcondensedregular">         <li></li>         <li></li>     </ul> </div><!-- .container --> 

and css code :

.pairing-prosecco-wines .list-green li{       background-repeat: no-repeat;       padding: 28px 5% 30px 5%;       -moz-border-radius: 2px;       -webkit-border-radius: 2px;       border-radius: 2px;       font-size: 30px;       line-height: 22px;       margin: 10px;       background: #1fd57b;       cursor: pointer; display:       inline-block; zoom: 1;       border: none;       letter-spacing: 1px;       text-transform: uppercase;       color: #1fd57b; }  .pairing-prosecco-wines ul {   text-align:center; } 

my question : know how extend @ maximum li fill in space @ maximum ? thank !

edit : here fiddle solution

you use either display:table or display:flex;

table layout example:

.list-green {    padding:0;    margin:auto;    display:table;    width:100%;    border-spacing:10px;  }  .list-green li {    display:table-cell;  } 

flex example

 .list-green {    padding:0;    width:100%;    margin:0 auto;    display:flex;    border-spacing:10px;  }  .list-green li { flex:auto;/* or 1 */  }