title: Bootstrap centering responsive img in container
body: <p>I want my banner to be centered and the logo above the banner. But as you can see both the logo and banner and not centered. How can I fix this? </p>
  
  <p>HERE IS LIVE VERSION: <a href="http://codepen.io/anon/pen/waYBxB" rel="nofollow">http://codepen.io/anon/pen/waYBxB</a></p>
  
  <p><strong>THE HTML</strong>
      
      
          
          </p>
  
  <pre><code>    &lt;/head&gt;
      &lt;body&gt;
  
  &lt;!-- 
      ==============================
           LOGO HEADER
      ==============================
      --&gt;
  &lt;section&gt;
        &lt;div class="container"&gt;
      &lt;div class="row"&gt;
            &lt;div class="col-md-6"&gt;&lt;img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"&gt;&lt;/div&gt;
            &lt;div class="col-md-6"&gt;&lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;!--==============================
           SLIDING BANNEER
      ==============================--&gt;
  &lt;section class="Banner "&gt;
        &lt;div class="container midText"&gt;
      &lt;div class="col-md-12 text-center hidden-xs"&gt;&lt;img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive"&gt;&lt;/div&gt;
    &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;!--==============================
           MENU BAR
      ==============================--&gt;
  &lt;section&gt;
  &lt;div class="container"&gt;
  &lt;div class="col-md-12"&gt;
        &lt;nav&gt;
      &lt;ul&gt;
            &lt;li&gt;&lt;a href="?p=home"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?p=home"&gt;Codepen.io&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?p=home"&gt;A longer button&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?p=home"&gt;This is my really long button&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?p=home"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?p=home"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
    &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;!--==============================
           MAIN CONTENT
      ==============================--&gt;
  &lt;section&gt;
     &lt;div class="container"  id="MainPage"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-9 MainContent"&gt;&lt;h3&gt;codepen ---- CODING HAS NEVER BEEN SO EASY!&lt;/h3&gt;&lt;br&gt; Notice how the white is centered but he image and the logo is not. How do I fix this?   &lt;/div&gt;
            &lt;div class="col-md-2"&gt;I AM IN THE BANNER SECTION &lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>THE CSS</strong></p>
  
  <pre><code>body {
      background-image: url(http://oi60.tinypic.com/2hhnpzn.jpg);
  }
  nav ul {
      list-style: none;
  
      overflow: hidden;
      height: 47px;
  }
  nav ul li a {
      color: #F9F7F7;
      background-image: linear-gradient(to top, #ff6351, #ffcc6e);
      padding: 8px 22px 8px 22px;
      display: block;
      text-align: center;
      font-size: 22px;
      float: left;
      margin-right: 5px;
      color: rgb(255, 255, 255);
      background-color: rgb(120, 120, 120);
      text-shadow: rgb(79, 79, 79) 1px 1px 3px;
  }
  .Logo {
      margin: 15px;
  }
  #MainPage
  {
  background-color: white;    
  }
  .midText
  {
  text-align:center
  }
  
  .MainContent
  {
    margin: 33px;
  }
  </code></pre>