title: How to increase the width of a responsive div in Bootstrap 3?
body: <p>I'm unable to increase the width of a div in a responsive Bootstrap layout. I need to use a two-column layout, with the left one fixed and right one fluid (a search box), but the last one doesn't expand. Also, when the screen resolution gets smaller, the divs must show one above other.</p>
  
  <p>This is the code:</p>
  
  <pre><code>    &lt;div class="columns-container"&gt;
  
      &lt;div class="left-column"&gt;
                &lt;center&gt;
      &lt;img class="img-responsive" src="http://shades.powercommerce.es/images/pics/shades-retail-header_2.jpg" /&gt;
    &lt;/center&gt;
      &lt;/div&gt;
  
      &lt;div class="right-column" &gt;
  &lt;div class="row"&gt;
    &lt;div class="col-lg-6"&gt;
      &lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search..." style="width:90%;"&gt;
        &lt;span class="input-group-btn"&gt;
          &lt;button class="btn btn-default" type="button"&gt;Go!&lt;/button&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And this is the CSS:</p>
  
  <pre><code>html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body { margin: 0 auto; }
  
  footer, header { position: relative; clear: both; }
  
  .left-column, .right-column, footer, header {  border: 1px solid  #ccc; padding: 1em; margin: .5em; }
  
  .nav {
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 0;
  }
  .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .nav &gt; li,
  .nav &gt; li &gt; a {
    display: inline-block;
    *display: inline;
    zoom: 1;
  }
  
  .inline-items {
    margin-top: 0;
  }
  
  .inline-items li {
    margin-left: 0;
    border-left: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .inline-items li:first-child {
    margin-left: 0;
    border: none;
    padding-left: 0;
    padding-right: 10px;
  }
  
  .inline-items li:last-child {
    padding-right: 0;
  }
  
  
  /* MEDIA QUERIES */
  @media screen and (min-width: 47.5em ) {
  
    .columns-container { 
      display:table;    
          width: 100%;
          float: left;
      }
  
    .left-column { 
      width: 18.75em;
      margin-right: -19.3em;
      position: relative;
      float: left;
      display:table-cell;    
    }
      .right-column { 
      display:table-cell;    
      margin-left: 20em;
      float: left;
    }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/gbNaBX?editors=110" rel="nofollow">Codepen</a></p>