title: Bootstrap responsive scaling issue on smaller than 1920 x 1080 resolutions
body: <p>I have a private video site that's main aimed towards my home networks and the desktop computers, however, the site was constructed on a 1920x1080 resolution so if that's any smaller that site looks like a catastrophe. here is the code for the page.</p>
  
  <pre><code>&lt;nav class="navbar navbar-trans navbar-fixed-top" role="navigation"&gt;
      &lt;div style="width:66%" class="container"&gt;
          &lt;div  class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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&gt;
          &lt;div class="navbar-collapse collapse" id="navbar-collapsible"&gt;
              &lt;ul class="nav navbar-nav navbar-left"&gt;
                  &lt;li&gt;&lt;a href="index.php"&gt;Network TV&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="col-md-4 col-md-offset-3" style="width:100%; height=:100%; color:black; margin-top:13%; text-align:center; border: 0"&gt;
    &lt;div class="row center-row"&gt;
      &lt;div style="width:10%" class="col-md-4"&gt;&lt;div style="background-color:transparetn" class="well"&gt;&lt;p&gt;&lt;u&gt;&lt;h4&gt;Season1&lt;/h4&gt;&lt;/u&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div style="width:10%"class="col-md-4"&gt;&lt;div class="well"&gt;&lt;p&gt;&lt;u&gt;&lt;h4&gt;Season2&lt;h4&gt;&lt;/u&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div style="width:10%"class="col-md-4"&gt;&lt;div class="well"&gt;&lt;p&gt;&lt;u&gt;&lt;h4&gt;Season3&lt;/u&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div style="width:10%"class="col-md-4"&gt;&lt;div class="well"&gt;&lt;p&gt;&lt;u&gt;&lt;h4&gt;Season4&lt;/h4&gt;&lt;/u&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div style="width:10%"class="col-md-4"&gt;&lt;div class="well"&gt;&lt;p&gt;&lt;u&gt;&lt;h4&gt;Season5&lt;/h4&gt;&lt;/u&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>What I want to know</strong></p>
  
  <p>My question is why does this not scale down properly, when the screen is smaller I want the margins to adjust to fix the screen, but instead it all just goes into a vertical list all mixed my and improperly scaled</p>