html - <ul> is wider than list items -

i have horizontal list 4 list items. want achieve simple task of having <ul> no wider cumulative width of <li>s right <ul> wider. in firefox's code inspector looks like:

here html:

<div id="content-container">    <div id="tabs">       <ul>          <li>publications</li><li>urls</li><li>global folders</li><li>private folders</li>       </ul>    </div> </div> 

css:

#content-container {     width: 65%;     float: right;     background-color: red; }  #tabs {     width: 100%;     text-align: left;     margin: 10px 0 0 10px; }  #tabs ul {     width: 100%;     list-style: none;     text-align: left; }  #tabs ul li {     display: inline;     background-color: #3e93cf;     font-size: 24px;     font-weight: bold;     padding: 7px 10px 7px 10px;     font-family: "segoe ui",verdana,helvetica,sans-serif;     color: #fff;     border-left: 1px solid #fff;     border-top: 1px solid #fff;     border-bottom: 1px solid #fff; }  #tabs ul li:last-child {     border: 1px solid #fff; } 

edit:

having added display: inline-block like:

tabs ul

{ width: 100%; list-style: none; text-align: left; display: inline-block; }

i this:

the browser automatically adds padding left of list. creates default space bullet points. need set padding zero:

#tabs ul {     padding: 0;     width: 100%;     list-style: none;     text-align: left;     display: inline-block; }