title: Extra space on the right of bootstrap container in safari
body: <p>I have encountered this error in safari 5.1.7. I have a row with 12 columns, the problem is when viewed in safari, the container adds extra space to the right.</p>
  
  <p>Here's the code:</p>
  
  <p>css</p>
  
  <pre><code>.wrapper {
  
      background:blue;
    }
  
    .wrapper .container {
  
      background:red;
  
    }
  
    .wrapper .container .row .col {
  
      height:30px;
      background:grey;
      padding: 0;
    }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
        &lt;div class='col-xs-1 col'&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code works fine on all browser except safari.</p>
  
  <p>Here it is in <a href="http://i.stack.imgur.com/uW0bh.jpg" rel="nofollow">chrome</a></p>
  
  <p>Here it is in <a href="http://i.stack.imgur.com/SeNPw.jpg" rel="nofollow">safari</a></p>