Bootstrap Toggle Open Menu not spanning 100% width of screen
<p>I'm having a bit of a problem with the Bootstrap nav I've placed on a website I'm making.</p>

<p>When collapsed on smaller screens, the drop down navigation menu doesn't span 100% of the screen - It looks as if there's a 1px gap on either side of the menu and I can't seem to figure out how to fix this.</p>

<p>** EDIT **</p>

<p>Due to bad markup in my original post - I've updated this (still having probelems, but this represents my problem better) at <a href="https://jsfiddle.net/yuxwh8cm/2/" rel="nofollow">JSFIDDLE</a></p>

<pre><code>&lt;div class="navbar navbar-custom"&gt;
&lt;div class="container"&gt;

    &lt;div class="navbar-header"&gt;

        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation"&gt;
        &lt;span class="fa fa-bars fa-2x"&gt;&lt;/span&gt; Menu&lt;/button&gt; 

        &lt;span class="logo"&gt; Logo&lt;/span&gt;
    &lt;/div&gt;

    &lt;div class="collapse navbar-collapse" id="navigation"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
                &lt;li&gt;&lt;a href="#linkRemovedForNow"&gt;Book A Repair&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href="#howitworks"&gt;How it Works&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href="#testimonals"&gt;Testimonals&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt; &lt;/li&gt;
            &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p></p>