title: Why is width: 100% not working here?
body: <p>I'm bussy with my footer, but for some reason the width: 100% tag isn't working.
  Screen of what I mean:</p>
  
  <p><a href="http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c" rel="nofollow">http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c</a></p>
  
  <p>My css code:</p>
  
  <pre><code>/*..Portfolio - Lars Beute..*/
  body{
      margin: 0;
      padding: 0;
      font-family: 'Montserrat', sans-serif;
  }
  header {
      background: #00795f;
      width: 100%;
      padding: 40px 0;
      color: white;
      text-align: center;
  }
  a{
      text-decoration: none;
      color: inherit;
  }
  nav ul{
      background-color: #42a286;
      overflow: hidden;
      color: white;
      padding: 0;
      text-align: center;
      margin: 0;
  }
  nav ul li{
      display: inline-block;
      padding: 20px;
  }
  nav ul li:hover{
      background-color: #399077;
      border-bottom: 3px solid white;
  }
  section {
      line-height: 1.5em;
      font-size: 0.9em;
      padding: 40px;
      width: 75%;
      margin: 0 auto;
  }
  .current{
      border-bottom: 3px solid white;
  }
  #intro{
      text-align: center;
      background-color: #E6E6E6;
      width: 100%;
  }
  #intro h1{
      font-size: 50px;
  }
  #intro em{
      opacity: 0.4;
  }
  #box1 {
      width: 100%;
      height: 300px;
      background-color: #1A1A1A;
      max-width: 100%;
      max-height: 100%;
      color: white;
      text-align: center;
      vertical-align: middle;
      line-height: 300px; 
  
  }
  #footer1 {
      background: #00795f;
      width: 100%;
      height: 100px;
      color: white;
      text-align: center;
      vertical-align: middle;
      line-height: 100px; 
  }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>    &lt;!--Portfolio by Lars Beute--&gt;
  &lt;!--Copying not allowed under my permission--&gt;
  &lt;!--Any questions? Contact me: larsbeute@hotmail.com--&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"&gt;
  &lt;script type="text/javascript" href="js/main.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;      
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Script Button--&gt;
      &lt;script&gt;
      function newDoc() {
      window.location.assign("contact.html")
      }
      &lt;/script&gt;
      &lt;!--Style Buttons--&gt;
      &lt;style scoped&gt;
  
          .button-success,
          .button-error,
          .button-warning,
          .button-secondary {
              color: white;
              border-radius: 4px;
              text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
              height: 80px;
              width: 200px;
          }
  
          .button-success {
              background: rgb(28, 184, 65); /* this is a green */
          }
  
          .button-error {
              background: rgb(202, 60, 60); /* this is a maroon */
          }
  
          .button-warning {
              background: rgb(223, 117, 20); /* this is an orange */
          }
  
          .button-secondary {
              background: rgb(66, 184, 221); /* this is a light blue */
          }
  
      &lt;/style&gt;
      &lt;!--NavBar--&gt;
  
      &lt;nav id="navbar"&gt;
      &lt;ul&gt;
          &lt;a href="#"&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;li class="current"&gt;Portfolio&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;li&gt;Contact&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;       
      &lt;/nav&gt;  
      &lt;!--Introduction--&gt;
      &lt;section id="intro"&gt;
          &lt;b&gt;&lt;h1&gt;"The Solution To New Websites!"&lt;/h1&gt;&lt;/b&gt;
          &lt;em&gt;"Young but has a lot of talent."&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;"Never had seen my website finished this fast!"&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;"If you don't hire this guy you have to reconsider, amazing!"&lt;/em&gt;&lt;br&gt;&lt;br&gt;
          &lt;button class="button-success pure-button" onclick="newDoc()"&gt;GET IN TOUCH &lt;i class="fa fa-sign-in"&gt;&lt;/i&gt;&lt;/button&gt;
  
          &lt;/section&gt;
      &lt;!--Text--&gt;
      &lt;section id="showcase"&gt;
          &lt;h1&gt;PORTFOLIO&lt;/h1&gt;
          &lt;hr&gt;
          &lt;div id="box1"&gt;
          &lt;h1&gt;This Portfolio&lt;/h1&gt;
          &lt;/div&gt;&lt;br&gt;
          &lt;div id="text"&gt;&lt;br&gt;
          &lt;h1&gt;About this project&lt;/h1&gt;
          &lt;em&gt;Date built started: The first of Juli 2015.&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;Date built finished: -&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;Owned by: Lars Beute&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;Link: &lt;a href="index.html"&gt;linkhere.com&lt;/a&gt;&lt;/em&gt;&lt;br&gt;
          &lt;p&gt;This is one of my firsts real sites I made.&lt;br&gt;
          It has a simple layout, and as less code as possible which
          makes it very easy to read, saying this I hope you think this too.&lt;br&gt;
          It is built fully by me, and owned fully by me.&lt;br&gt;
          The site is meant to showcase my portfolio and to let people contact me.&lt;br&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div id="box1"&gt;
          &lt;h1&gt;Trialer.co.uk&lt;/h1&gt;
          &lt;/div&gt;&lt;br&gt;
          &lt;div id="text"&gt;&lt;br&gt;
          &lt;h1&gt;About this project&lt;/h1&gt;
          &lt;em&gt;Date built started: Start of May 2015.&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;Date built finished: The end of Juni 2015.&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;Owned by: David&lt;/em&gt;&lt;br&gt;
          &lt;em&gt;Link: &lt;a href="trialer.co.uk"&gt;trialer.co.uk&lt;/a&gt;&lt;/em&gt;&lt;br&gt;
          &lt;p&gt;My second real creation.&lt;br&gt;
          The main goal was to make it look very easy to understand and user-friendly.&lt;br&gt;
          I think I did a good job on that, and my customer thinks that either.&lt;br&gt;
          The site is meant to advertise trials people can get.&lt;br&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/section&gt;  
      &lt;!--Footer--&gt;
      &lt;section id="footer"&gt;
      &lt;footer&gt;
      &lt;div id="footer1"&gt;
      &amp;copy; Lars Beute - 2015 - Linkhere.com - larsbeute@hotmail.com
      &lt;/div&gt;
      &lt;/footer&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want the footer to be fully over the bottom of the page.</p>
  
  <p>Thanks a lot!</p>