title: Bootstrap 3 fluid container not 100% width
body: <h1>The issue</h1>
  <p>I am thinking about implementing Bootstrap 3 into my project and I am testing out some of its functionalities and properties before switching to this front-end framework.</p>
  <p>The weird thing I noticed is that a fluid Bootstrap container doesn't actually span 100% of the viewport width (notice the 1px line on the right of the pink Bootstrap element):</p>
  <p><a href="https://i.stack.imgur.com/4xb3K.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4xb3K.png" alt="image" /></a></p>
  
  <p>This is what my HTML looks like. It's basically the default Bootstrap template.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
          &lt;title&gt;Page title&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.css&quot;&gt; &lt;!-- Core CSS --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;css/test.css&quot;&gt; &lt;!-- Custom CSS --&gt;
          &lt;!--[if lt IE 9]&gt;
              &lt;script src=&quot;https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;
              &lt;script src=&quot;https://oss.maxcdn.com/respond/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;full-width&quot;&gt;This is not bootstrap&lt;/div&gt;
          &lt;div class=&quot;container-fluid&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      This is Bootstrap
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-9&quot;&gt;
                      This is Bootstrap too
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Obviously I use the standard, latest CSS version of bootstrap and my own custom CSS:</p>
  <pre><code>.full-width {
      width: 100%;
      background-color: #808080;
  }
  .col-md-3 {
      background-color: #4f4;
  }
  .col-md-9 {
      background-color: #f4f;
  }
  </code></pre>
  <p>Why isn't this fluid container spanning 100% of the width? Although it's just 1px it will definitely break up my page design.</p>
  <h1>Issue recreation</h1>
  <p>I created a jsfiddle on request concerning this issue: <a href="http://jsfiddle.net/J6UE5" rel="noreferrer">http://jsfiddle.net/J6UE5</a></p>
  <p>To recreate my issue resize the viewport using Safari (7.0.5) on a Mac running OS X 10.9.4.
  You'll notice the 1px line on the right side of the pink container appearing and disappearing while resizing. Once the green and pink container are stacked (Bootstrap behavior) the 1px line disappears and everything is 100% width.</p>