Horizontal space on display:table justified bootstrap navbar on Safari
<p>On Desktop and iOS versions of Safari -- a mysterious horizontal space is being added to both sides of a justified bootstrap 3 navbar menu.</p>

<p>What can I do to remove the spacing?</p>

<p>Firefox, Chrome:</p>

<p><a href="https://i.stack.imgur.com/P11uy.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/P11uy.jpg" alt="enter image description here"></a></p>

<p>Safari:</p>

<p><a href="https://i.stack.imgur.com/mNzEM.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/mNzEM.jpg" alt="enter image description here"></a></p>

<p><strong>JSFiddle --> <a href="https://jsfiddle.net/Lscerkzx/1/" rel="nofollow">https://jsfiddle.net/Lscerkzx/1/</a></strong></p>

<pre><code>&lt;nav class="navbar navbar-default"&gt;
&lt;ul class="nav navbar-nav"&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

.navbar-nav {
    margin: 0 auto;
    display: table;
    table-layout: auto;
    float: none;
    width: 100%;
}
.navbar-nav&gt;li {
    display: table-cell;
    float: none;
    text-align: center;
}
.navbar {
    background-color: black;
    border-radius: 0;
}
li {
    border: 1px solid red;
}
</code></pre>

<p>I've also tried to use '<strong>table-layout: fixed</strong>' which seems to work in some cases. But I don't want to use it if possible.</p>

<p><strong>JSFiddle --> <a href="https://jsfiddle.net/Lscerkzx/2/" rel="nofollow">https://jsfiddle.net/Lscerkzx/2/</a></strong></p>

<pre><code>.navbar-nav {
    margin: 0 auto;
    display: table;
/*      table-layout: auto; */
    table-layout: fixed;
    float: none;
    width: 100%;
}
.navbar-nav&gt;li {
    display: table-cell;
    float: none;
    text-align: center;
    width: 100%; //added
}
</code></pre>