Unable to get content rationale: gap between jobs in Bootstrap

Question

How can I get the snippet below to look like this:

So that the elements are evenly distributed, and the first element has no empty space on the left, and the last element has no empty space on the right. Similar to what MS Word can do:

Full justification

All lines in the paragraph expand, so they are neat against both the left and right margins. To expand the line, you need to add space between words and characters to fill the line.

In the code snippet below, there is a lot of purple space to the left of the first element, I want to remove this.

ul {
  list-style: none;
  background-color: rebeccapurple;
  color: white;
  margin: 55px 10px;
  display: flex; 
  // align-items: stretch;
  justify-content: space-between;
}
li {
  padding: 0;
  background-color: #6495ed;
}
li:nth-of-type(2n) {
  background: lightslategrey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
	<li>Item</li>
</ul>

Run codeHide result

UPDATE

@kukkuz , , twitter Bootstrap. Bootstrap :before :after, .

, , ul, Bootstrap.

FYI - Bootstrap CDN, v3.3.7: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css

ul:before { 
    content: none;
}
ul:after {
    content: none;
}

Answer 1

Reset / padding ul - . :

ul {
  list-style: none;
  background-color: rebeccapurple;
  color: white;
  margin: 55px 10px;
  padding: 0;
  display: flex;
  /*align-items: stretch;*/
  justify-content: space-between;
}
li {
  padding: 0;
  background-color: #6495ed;
}
li:nth-of-type(2n) {
  background: lightslategrey;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Hide result