title: How to make responsive columns with margins using bootsrap
body: <p>I've been trying to make a responsive navbar with columns but I can't manage to react well to the different sizes I've trying al lot of things: column-offset, contaniers, paddings... but I can't get a decent result. Here it is what I managed to do so far:</p>
  
  <pre><code>    &lt;nav class="navbar navbar-default "&gt;
  
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt; 
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
  
  
      &lt;div class="navbar-collapse collapse" style="height: 0px;"&gt;
      &lt;div class="row show-grid"&gt;
  
          &lt;div class=" col-xs-8 col-md-6 col-md-offset-2" &gt; 
            &lt;ul class="nav navbar-nav" id="altre"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Style Guide&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Be a man&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class=" col-xs-4 col-md-4"&gt; 
  
             &lt;ul class="nav navbar-nav hidden-xs" id="login"&gt;
               &lt;li class="dropdown"&gt;
                 &lt;a class="dropdown-toggle" href="#" data-toggle="dropdown"&gt;Login&lt;/a&gt; 
                 &lt;div class="dropdown-menu"&gt;
                   &lt;form class="navbar-form" role="form"&gt;
                     &lt;p&gt;&lt;input class="form-control" type="text" placeholder="E-mail"&gt;&lt;/p&gt;
                     &lt;p&gt;&lt;input class="form-control" type="password" placeholder="Contrasenya"&gt;&lt;/p&gt;
                     &lt;button type="button" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
                     &lt;button type="button" class="btn btn-success"&gt;Log in&lt;/button&gt;
                   &lt;/form&gt;
                 &lt;/div&gt;
               &lt;/li&gt;
             &lt;/ul&gt;
  
  
  
  
  
             &lt;form class="navbar-form text-center visible-xs" role="form"&gt;
               &lt;p&gt;&lt;input class="form-control" type="text" placeholder="E-mail"&gt;&lt;/p&gt;
               &lt;p&gt;&lt;input class="form-control" type="password" placeholder="Contrasenya"&gt;&lt;/p&gt;
               &lt;button type="button" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
               &lt;button type="button" class="btn btn-success"&gt;Log in&lt;/button&gt;
             &lt;/form&gt;
  
  
         &lt;/div&gt;
       &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/nav&gt;
  </code></pre>
  
  <p>At first sight it seems to be working right but when you resize you see the difference between the right and left margin.</p>
  
  <p>I'm very lost at this point, anyone knows a clean way to have a good result?</p>
  
  <p>here the files if you don't want to download one by one:
  <a href="https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing" rel="nofollow">https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing</a></p>
  
  <p>thanks</p>