title: Bootstrap 3 - Container stretched on IE8
body: <p>I am writing HTML for a page and have used bootstrap 3 as well. The page appears to be fine in FF, Chrome, IE9 but its not working properly in IE8, IE7.</p>
  
  <p><strong>Problem</strong>: The main content seems to be stretched fully across the page, i.e. behaves like fluid where as in other browsers works fine.</p>
  
  <p><strong>Things I have tried</strong>: As given in other forums, I tried including respond.js, meta tag as in below code ( "X-UA-Compatible" content="IE=edge"), HTML5shiv but nothing seems to work. I read that bootstrap 3 doesnt support IE7 officially but even IE8 gives this problem. It looks like the container class is not applied to IE8/7.</p>
  
  <p>Can anyone please help on this? Below is the HTML for that. Also, its on fiddle - <a href="http://jsfiddle.net/CPaDb/2/" rel="nofollow">http://jsfiddle.net/CPaDb/2/</a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/main.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/&gt;
  &lt;!--[if lt IE 9]&gt;
      &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="logo-cont"&gt;
          &lt;a href="home.html" class="logo-link&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="main-cont"&gt;
          &lt;div class="site-box-cont"&gt;
              &lt;ul class="site-box-list clearfix"&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="site-box"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script language="javascript" type="application/javascript" src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="application/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="application/javascript" src="js/respond.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.logo-cont {padding:35px 0 35px 250px;}
  .logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }
  
  .main-cont {background:#2d3a42;}
  .site-box-cont {width:670px; margin:0 auto; padding:150px 0}
  .site-box-list li {float:left; margin:0px 15px 15px 0px;}
  .site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
  .site-box:hover {background:#acd037;}
  </code></pre>