How to make banner responsive CSS

Question

I have built a banner using this demo: http://andwecode.com/playground-demo/naruto-with-parallax-js/

I am having problems making it responsive. I have tried changing the values to percentages and from another question to the header CSS to:

  #header {width: 960px; background:#34495E;
/* Show in default resolution screen*/
position: relative;
margin:0 auto;
line-height: 1.4em;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
@media only screen and (max-width: 479px){
    #container2 { width: 90%; }
}

Here is the full CSS:

@import url(http://fonts.googleapis.com/css?family=Gudea:400,400italic,700);

* {margin:0; padding:0;}

body {font-family:'Gudea', Arial, Helvetica, sans-serif; font-size:12px; background:#fff;}
a {text-decoration:none;}

#header {width: 960px; background:#34495E;
/* Show in default resolution screen*/
position: relative;
margin:0 auto;
line-height: 1.4em;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
@media only screen and (max-width: 479px){
    #container2 { width: 90%; }
}
.topNav {background:#253749; width:100%; }
.topNav a {display:block; padding:5px 10px; color:#FFF;}
.topNav a:hover {background:#2B445E; transition:background 0.5s ease}

.headingContainer {width:100%; margin:0px auto; }
.heading {color:#FFF; text-align:center;}
.heading h1 {margin-bottom:10px;}
.heading a {color:#00BFFF;}
.heading P {font-size:14px; margin-bottom:20px;}

.clearfix:before, .clearfix:after {content: " "; display: table;}  
.clearfix:after {clear:both;}  
.clearfix {*zoom:1;}  

.pull-left {float:left;}
.pull-right {float:right;}

.container {width:100%; height:66px; overflow:hidden; position:relative; margin:0px auto; background:#000;}
.background {background:url(../images/huge_bg.jpg); width:100%; height:66px; }

.layer div {position:absolute;}
.landscape{top:0px; left:-250px;}
.grass{top:0px; left:-350px;} 
.leaves{top:0px; left:-400px;}

And the HTML:

<header id="header" class="clearfix">
</header>

<section class="container clearfix">
        <ul id="scene" class="scene">
          <li class="layer" data-depth="0.00">
            <div class="background"></div>
          </li>

          <li class="layer" data-depth="0.60">
            <div class="kurama"><img src="images/kurama.png"></div>
          </li>

          <li class="layer" data-depth="0.40" data-invert-y="false">
          <div class="landscape"><img src="images/landscape.png" /></div>
          </li>

          <li class="layer" data-depth="0.60">
            <div class="grass"><img src="images/grass.png" /></div>
          </li>

          <li class="layer" data-depth="1.20">
            <div class="obito"><img src="images/obito.png"></div>
          </li>

          <li class="layer" data-depth="1.00">
          <div class="minato"><img src="images/minato.png"></div>
          </li>

          <li class="layer" data-depth="2.30">
            <div class="leaves"><img src="images/leaves.png"></div>
          </li>
        </ul>
</section>  

Answer 1

So yeah I got the answer for ya:

I did the changes base on this SITE DOM & CSS:

 //CSS
.headingContainer {
  margin: 50px auto;
  width: 75%; // changed value from 1024px
}

.btnContainer {
  margin: 40px auto 0px;
  width: 100%; //changed value from 450px
}

.btn{
  display: block;
  padding: 10px 30px;
  border: 2px solid #0B292D;
  font-weight: bold;
  color: #00BFFF;
  width: 150px;
  text-align: center;
  background: #1C3044 none repeat scroll 0% 0%;
  margin: 10px auto;

//Float left will cancel  the display block property
  //float: left;  --> delete this line

//Change margin-right to margin to align mid
  //margin-right: 10px; -- delete this line
} 

CHECK IT HERE screenshots in Phone and Tablet