title: Why isn't footer 100% width?
body: <p>I'm expecting my footer to occupy all horizontal space at the bottom of the page, <code>width 100%</code> BUt for some reason it is centred in page and seems to have characteristics of my wrapper.
  Here is image (Website is not live yet so I can't provide a link)</p>
  
  <p><img src="https://i.stack.imgur.com/eky40.png" alt="enter image description here"></p>
  
  <p>That black footer should occupy all horizontal space at the bottom, I'll include code which I think is responsible for this issue (code simplified, so will be different from image).</p>
  
  <p>JSfiddle <a href="http://jsfiddle.net/aHpua/4/" rel="nofollow noreferrer">http://jsfiddle.net/aHpua/4/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="content"&gt;
              &lt;article class="content-info"&gt;Content
              &lt;/article&gt;
              &lt;aside class="sidebar"&gt;
                  &lt;h4&gt;MORE INFORMATION&lt;/h4&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Item1&lt;/a&gt;
                      &lt;/li&gt;
  
                      &lt;li&gt;
                          &lt;a href="#"&gt;Item2&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/aside&gt;
      &lt;/div&gt;&lt;!-- END.content-wrapper --&gt;
      &lt;div class="contact-us"&gt;
          &lt;h2&gt;
              Have any questions for us?
              &lt;a href="#"&gt;CONTACT US&lt;/a&gt;
          &lt;/h2&gt;
      &lt;/div&gt;&lt;!-- END.contact-us --&gt;
  &lt;div class="footer-container"&gt;
          &lt;div class="wrapper"&gt;
              &lt;footer class="footer"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Tel:&lt;span&gt; 0000&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;Fax:&lt;span&gt; 0000&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;Email: &lt;a href="mailto:nla@bla.com"&gt;bla&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h1&gt;Company Name&lt;/h1&gt;&lt;/li&gt;
                  &lt;/ul&gt; 
              &lt;/footer&gt;
          &lt;/div&gt;
          &lt;!-- END.footer-wrapper --&gt;
          &lt;div class="copyright"&gt;
              &lt;div class="wrapper"&gt;
                  &amp;copy; Copyright 2013.
              &lt;/div&gt;&lt;!-- END.copyright-wrapper --&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- END.footer-container --&gt;    
          &lt;?php wp_footer(); ?&gt;
         &lt;!-- Google Analytics --&gt; 
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* ==========================================================================
     =content
     ========================================================================== */
  
  .content {
      background-color: #fff;
      border: 1px solid #e1e1e1;
      padding: 30px 65px 30px 65px;
      z-index: 999;
      overflow: hidden;
      box-shadow: 0 -1px 0 #ffffff inset,
                  0 -2px 0 #ebebeb inset,
                  0 -3px 0 #ffffff inset,
                  0 -4px 0 #efefef inset;
  }
  
  .contact-us {
      background-color: #f9faf6;
      padding: 30px 65px 30px 65px;
      border-left: 1px solid #e1e1e1;
      border-right: 1px solid #e1e1e1;
      border-bottom: 1px solid #e1e1e1;
      box-shadow: 0 4px 5px -5px #d3d3d3 inset;
      clear: both;
  }
  
  .content-info {
      float: left;
      width: 590px;
      background: red;
      line-height: 25px;
  }
  
  .sidebar {
      float: right;
      width: 220px;
      line-height: 25px;
  }
  
  /* ==========================================================================
     =footer
     ========================================================================== */
  
  
  .footer-container {
      background-color: #2a2a2b;
      background-image: url(img/header_bg.png);
      overflow: hidden;
      margin-top: 25px;
      width: 100%;
  }
  
  .footer {
      border-top: 5px solid #00b2e5;
      overflow: hidden;
  }
  
  .copyright {
      background-color: #242424;
      color: #6b6b6b;
      width: 100%;
  }
  
  .copyright .wrapper {
      padding: 7px 65px 7px 65px;
      width: 850px;
  }
  </code></pre>