title: Parallax scrolling and fixed footer code causing width issues
body: <p>I bolted together some bits of code. One is parallax scrolling, and the other is a piece of fixed footer code I found here: <a href="http://codepen.io/madshaakansson/pen/CGjcH" rel="nofollow noreferrer">http://codepen.io/madshaakansson/pen/CGjcH</a></p>
  
  <p>Though after bolting it together and fixing a few issues, I now have a problem with different widths. The header is a different width to the footer, and main content doesnt span the whole width of the page. I have tried adjusting the width of the content css to 100%, which made the main content span the whole width, but it ended up breaking the footer.</p>
  
  <p>I am not sure what I need to change to make these different bits of code work together. Any advice would be greatly appreciated. </p>
  
  <p>My attempt:
  <a href="http://codepen.io/Dingerzat/pen/QGbWKK" rel="nofollow noreferrer">http://codepen.io/Dingerzat/pen/QGbWKK</a></p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     /*global define: false */
      function init() {
        window.addEventListener('scroll', function(e) {
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            header = document.querySelector("header");
          if (distanceY &gt; shrinkOn) {
            classie.add(header, "smaller");
          } else {
            if (classie.has(header, "smaller")) {
              classie.remove(header, "smaller");
            }
          }
        });
      }
      window.onload = init();
  
  
  
      (function(window) {
  
        'use strict';
  
        // class helper functions from bonzo https://github.com/ded/bonzo
  
        function classReg(className) {
          return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
        }
  
        // classList support for class management
        // altho to be fair, the api sucks because it won't accept multiple classes at once
        var hasClass, addClass, removeClass;
  
        if ('classList' in document.documentElement) {
          hasClass = function(elem, c) {
            return elem.classList.contains(c);
          };
          addClass = function(elem, c) {
            elem.classList.add(c);
          };
          removeClass = function(elem, c) {
            elem.classList.remove(c);
          };
        } else {
          hasClass = function(elem, c) {
            return classReg(c).test(elem.className);
          };
          addClass = function(elem, c) {
            if (!hasClass(elem, c)) {
              elem.className = elem.className + ' ' + c;
            }
          };
          removeClass = function(elem, c) {
            elem.className = elem.className.replace(classReg(c), ' ');
          };
        }
  
        function toggleClass(elem, c) {
          var fn = hasClass(elem, c) ? removeClass : addClass;
          fn(elem, c);
        }
  
        var classie = {
          // full names
          hasClass: hasClass,
          addClass: addClass,
          removeClass: removeClass,
          toggleClass: toggleClass,
          // short names
          has: hasClass,
          add: addClass,
          remove: removeClass,
          toggle: toggleClass
        };
  
        // transport
        if (typeof define === 'function' &amp;&amp; define.amd) {
          // AMD
          define(classie);
        } else {
          // browser global
          window.classie = classie;
        }
  
      })(window);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  font,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
  }
  body {
    line-height: 1;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    clear: both;
    font-weight: normal;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote {
    quotes: none;
  }
  blockquote:before,
  blockquote:after {
    content: '';
    content: none;
  }
  del {
    text-decoration: line-through;
  }
  /* tables still need 'cellspacing="0"' in the markup */
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  a img {
    border: none;
  }
  /* =Scss Variables
      -------------------------------------------------------------- */
  
  /* =Global
      -------------------------------------------------------------- */
  
  *,
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  body {
    background-color: #3cb5f9;
    color: #505050;
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
  }
  /* Headings */
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1;
    font-weight: 300;
  }
  a {
    text-decoration: none;
    color: #3cb5f9;
  }
  a:hover {
    color: #0793e2;
  }
  /* =Template
      -------------------------------------------------------------- */
  
  #wrapper {
    width: 100%;
    margin: 0 auto;
  }
  #main {
    background-color: #ffffff;
    padding-top: 150px;
  }
  .container {
    width: 80%;
    margin: 0 auto;
    padding: 0 30px;
  }
  section {
    padding: 60px 0;
  }
  section h1 {
    font-weight: 700;
    margin-bottom: 10px;
  }
  section p {
    margin-bottom: 30px;
  }
  section p:last-child {
    margin-bottom: 0;
  }
  section.color {
    background-color: #d51c84;
    color: white;
  }
  /* =Info Bar
      -------------------------------------------------------------- */
  
  #info-bar {
    background-color: #000000;
  }
  #info-bar a {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
    padding: 10px;
  }
  #info-bar a:hover {
    background-color: #0793e2;
  }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    display: block;
    width: 50%;
  }
  #info-bar span.all-tutorials {
    float: left;
    text-align: left;
  }
  #info-bar span.back-to-tutorial {
    float: right;
    text-align: right;
  }
  /* =Header
      -------------------------------------------------------------- */
  
  #logo img {
    height: 40%;
  }
  header {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #000000;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
  }
  header h1#logo {
    display: inline-block;
    height: 150px;
    line-height: 150px;
    float: left;
    font-family: "Oswald", sans-serif;
    font-size: 60px;
    color: white;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  header nav {
    display: inline-block;
    float: right;
  }
  header nav a {
    line-height: 150px;
    margin-left: 20px;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  header nav a:hover {
    color: white;
  }
  header.smaller {
    height: 75px;
  }
  header.smaller h1#logo {
    width: 150px;
    height: 75px;
    line-height: 75px;
    font-size: 30px;
  }
  header.smaller nav a {
    line-height: 75px;
  }
  /* =Footer
      -------------------------------------------------------------- */
  
  *,
  *:before,
  *:after {
    box-sizing: border-box;
    color: #242424;
    padding: 20;
    margin: 30;
  }
  html,
  body {
    background: rgb(0, 0, 0);
  }
  .content {
    width: 850px;
    margin: auto;
    margin-bottom: 350px;
    /* Same height as footer */
    padding: 100px 0;
  }
  .fixed_footer {
    width: 100%;
    height: 350px;
    background: #000000;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -100;
  }
  .fixed_footer p {
    color: #696969;
    column-count: 2;
    column-gap: 50px;
    font-size: 1em;
    font-weight: 300;
  }
  /* =Extras
      -------------------------------------------------------------- */
  
  .clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
  }
  /* =Media Queries
      -------------------------------------------------------------- */
  
  @media all and (max-width: 660px) {
    /* =Header
        -------------------------------------------------------------- */
    header h1#logo {
      display: block;
      float: none;
      margin: 0 auto;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    header nav {
      display: block;
      float: none;
      height: 50px;
      text-align: center;
      margin: 0 auto;
    }
    header nav a {
      line-height: 50px;
      margin: 0 10px;
    }
    header.smaller {
      height: 75px;
    }
    header.smaller h1#logo {
      height: 40px;
      line-height: 40px;
      font-size: 30px;
    }
    header.smaller nav {
      height: 35px;
    }
    header.smaller nav a {
      line-height: 35px;
    }
  }
  @media all and (max-width: 600px) {
    .container {
      width: 100%;
    }
    #info-bar a {
      display: block;
    }
    #info-bar span.all-tutorials,
    #info-bar span.back-to-tutorial {
      width: 100%;
    }
    #info-bar span.all-tutorials,
    #info-bar span.back-to-tutorial {
      float: none;
      text-align: center;
    }
    #info-bar span.all-tutorials {
      border-bottom: solid 1px #0793e2;
    }
  }
  html,
  body {
    margin: 0;
    height: 100%;
  }
  section {
    position: relative;
    height: 100%;
    background-attachment: fixed;
    background-size: cover !important;
    background-position: center;
    background-blend-mode: screen;
    /* &amp;:nth-of-type(1) */
  }
  section h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: #fff;
    width: 100%;
    text-align: center;
  }
  section:nth-of-type(1) {
    /* .paralax-1 */
  }
  section:nth-of-type(1) .paralax-1 {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* .new-paralax */
  }
  section:nth-of-type(1) .paralax-1 .new-paralax {
    z-index: -100000;
    transform: translateZ(-8000px) scale(0.4);
    background-attachment: fixed;
    background-size: cover !important;
    background-position: center;
    background-blend-mode: screen;
    height: 100%;
    width: 100%;
    position: relative;
    transform: scale(1.3);
    background-color: #ffffff;
    background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg");
  }
  section:nth-of-type(2) {
    background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/iStock_000068237701_Full-edited.jpg");
  }
  section:nth-of-type(3) {
    background-image: url("https://visualhunt.com/photos/xl/2/soup-vegetables-pot-cooking-food-healthy-carrot.jpg");
    background-color: red;
  }
  section:nth-of-type(4) {
    background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" href="css/style.css" /&gt;
  
  &lt;!-- js --&gt;
  
  
  &lt;body&gt;
  
    &lt;div id="wrapper"&gt;
  
      &lt;header&gt;
        &lt;div class="container clearfix"&gt;
          &lt;h1 id="logo"&gt;
                  &lt;img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png"&gt;
              &lt;/h1&gt;
          &lt;nav&gt;
            &lt;a href=""&gt;Lorem&lt;/a&gt;
            &lt;a href=""&gt;Ipsum&lt;/a&gt;
            &lt;a href=""&gt;Dolor&lt;/a&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
      &lt;!-- /header --&gt;
      &lt;div id="main"&gt;
        &lt;div id="content"&gt;
          &lt;main class="content" role="main"&gt;
  
            &lt;section&gt;
              &lt;div class="container"&gt;
                &lt;h2&gt;Services for Market Research&lt;/h2&gt;
                &lt;br&gt;
                &lt;p&gt;Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                  roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                  pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.&lt;/p&gt;
                &lt;p&gt;Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                  chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                  ice cream macaroon applicake.&lt;/p&gt;
                &lt;p&gt;
                  &lt;a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll"&gt;&amp;laquo; Go back to this tutorial?&lt;/a&gt;
                  &lt;br&gt;
                  &lt;a href="http://www.callmenick.com/tutorials"&gt;&amp;laquo; Go back to all tutorials?&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/section&gt;
            &lt;section class="color"&gt;
              &lt;div class="container"&gt;
                &lt;h1&gt;Cupcakes for the people!&lt;/h1&gt;
                &lt;p&gt;Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                  roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                  pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.&lt;/p&gt;
                &lt;p&gt;Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                  chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                  ice cream macaroon applicake.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/section&gt;
            &lt;section&gt;
              &lt;div class="container"&gt;
                &lt;h1&gt;Chocolate, vanilla, and red velvet&lt;/h1&gt;
                &lt;p&gt;Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                  roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                  pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.&lt;/p&gt;
                &lt;p&gt;Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                  chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                  ice cream macaroon applicake.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/section&gt;
            &lt;section class="color"&gt;
              &lt;div class="container"&gt;
                &lt;p&gt;Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                  roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                  pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.&lt;/p&gt;
                &lt;p&gt;Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                  chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                  ice cream macaroon applicake.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/section&gt;
            &lt;section&gt;
              &lt;div class="container"&gt;
                &lt;h1&gt;Sugar rush, oh my...&lt;/h1&gt;
                &lt;p&gt;Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                  roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                  pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.&lt;/p&gt;
                &lt;p&gt;Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                  chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                  ice cream macaroon applicake.&lt;/p&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- #main --&gt;
  
  
      &lt;footer class="fixed_footer"&gt;
        &lt;div class="content"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi.
            Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
  
  
  
    &lt;/div&gt;
    &lt;!-- /#wrapper --&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>function init() {
    window.addEventListener('scroll', function(e) {
      var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 300,
        header = document.querySelector("header");
      if (distanceY > shrinkOn) {
        classie.add(header, "smaller");
      } else {
        if (classie.has(header, "smaller")) {
          classie.remove(header, "smaller");
        }
      }
    });
  }
  window.onload = init();</p>