html - Horizontally align UL items within parent div with no space on either side? -

i'm making navigation menu , have run common problem of needing horizontally align ul equal spacing around each list item. however, list inside of div set width of 1100px , need there no space on left or right-hand sides of div -- first , last list items need reach side of div.

here's unordered list have right now:

ul{             width:100%;             display:table;             list-style-type:none;             padding:0;             border-spacing:5px;             li{                 display:table-cell;                 padding:0 30px;             }         } 

and said, unordered list inside of div has width set 1100px. should make list stretch full width of div?

1) set text-align:justify on container

2) use pseudo element stretch list items 100% of width of list

fiddle

ul {    width: 800px;    text-align: justify;    list-style-type: none;    padding: 0;    background: yellow;  }  ul:after {    content: '';    display: inline-block;    width: 100%;  }  li {    display: inline-block;    padding: 0 30px;    text-align: center;    background: tomato;  }

<div id="explore-nav">    <ul>      <li>example</li>      <li>example</li>      <li>example</li>      <li>example</li>    </ul>  </div>