title: Header Image won't cover page width
body: <p>I am continuing to practice with HTML and CSS. I am trying to make an image go the width of the page, centered below the header. For some reason, it won't work when I try options on stretching it. My guess is that there is an option I have yet to come across to do so.</p>
  
  <p>CSS</p>
  
  <pre><code>#header {
  
  height: 80px;
  background-color: gray;
  margin-bottom: 60px;
  
  
  }
  
  .container {
  
  }
  
  .MainImage {
  
  background-image:url(computers.jpg);
  height: 400px;
  background-repeat: no-repeat;
  width: 100%;
  
  }
  
  .MainImage img {
  
  position: relative;
  background-size: cover;
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id = "header"&gt;
  &lt;div class = "nav"&gt;
  
      &lt;!-- container-fluid gives full width container of whole viewport --&gt;
  
      &lt;div class = "container-fluid"&gt;
  
  
      &lt;ul id = "nav" class= "text-left"&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;strong&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;Technologies&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;Programs&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;Blog&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul id = "nav" class = "text-right"&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;strong&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;Sign In&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;Contact&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;/div&gt;&lt;!-- end container-fluid--&gt;
  &lt;/div&gt;&lt;!--end nav--&gt;
  &lt;/div&gt; &lt;!-- end header --&gt; 
  
  
  
  &lt;div id = "Main"&gt;
  
  
      &lt;div class = "MainImage"&gt;
  
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;&lt;!--end Main--&gt;
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xehu1tg0/" rel="nofollow noreferrer">http://jsfiddle.net/xehu1tg0/</a></p>
  
  <p>UPDATE: my IE 10 image error</p>
  
  <p><img src="https://i.stack.imgur.com/lGX87.jpg" alt="enter image description here"></p>